Jquery UI tabs not working with .tabs() function

Question

I am totaly new to JQUERY and i have got a project in which i have to use JQUERY UI tabs i downloaded one UI tab and followed all the instructions that are listed on here my html code is:

   <div id="tab">
    <ul class="tabs">
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul> 
    <div class="tab-content" id="tabs1">Tab1</div>
    <div class="tab-content" id="tabs2">Tab2</div>
    <div class="tab-content" id="tabs3">Tab3</div> </div>

and my JQUERY function is :

    <script type="text/javascript">

    $(document).ready(function () {
        $('#tab').tabs();
    });
</script>

The problem is that when i run the page it shows the output as follows: this

and i CAN NOT NAVIGATE WITH TABS... I will heighly appreciate your kind help in this regard

Thanks in advance and looking for your prompt help

Check your console. Do you see Uncaught jQuery UI Tabs: Mismatching fragment identifier. ? — jcolebrand
– jcolebrand, Commented Jul 21, 2012 at 5:40

mu is too short · Accepted Answer · 2012-07-21 05:40:08Z

3

The links in the tab buttons:

<li><a href="#tabs-1">Tab1</a></li>
<li><a href="#tabs-2">Tab2</a></li>
<li><a href="#tabs-3">Tab3</a></li>

need to match the id attributes of the tabs. Your links use tabs-1, tabs-2, and tabs-3 but your tabs use tabs1, tabs2, and tabs3.

Demo: http://jsfiddle.net/ambiguous/kbfjS/

answered Jul 21, 2012 at 5:40

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hardworker Over a year ago

AWESOME and thank you so much for the help it is fixed now :)

Hardworker Over a year ago

Again another problem i am facing in this issue, when a post back occurs on any of the tabs the tab is reloaded from beging and the first tab comes even if i call an event on the other tabs, the selected tab is not reloading after postback; how to solve this one? please help me ..thanks in advance

Hardworker Over a year ago

I solved the above issue by using cookie function of jquery ui tabs, but now the problem is even after closing and loading the page back instead of default tab the last selected tab comes, now am totaly stack and badly need your help in this regard..

mu is too short Over a year ago

@Hardworker: You could adjust the post-back to keep track of the open tab or delete the cookie after it has served its purpose.

Hardworker Over a year ago

I found the solution, instead of using cookie i used hiddenfield to keep track of tab indicies..anyways thanks

|

Sang Suantak · Accepted Answer · 2012-07-21 05:40:23Z

0

Rename the content div's to this, you for got the dash -.

<div class="tab-content" id="tabs-1">Tab1</div>
<div class="tab-content" id="tabs-2">Tab2</div>
<div class="tab-content" id="tabs-3">Tab3</div>

answered Jul 21, 2012 at 5:40

Sang Suantak

5,2652 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

Jquery UI tabs not working with .tabs() function

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related