CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Hardworker
Hardworker

Reputation: 229

Jquery UI tabs not working with .tabs() function

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

Upvotes: 0

Views: 6259

Answers (2)

Sang Suantak
Sang Suantak

Reputation: 5265

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>

Upvotes: 0

mu is too short
mu is too short

Reputation: 434596

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/

Upvotes: 3

Related Questions