CODEWITHSUNDEEP
jqueryjquery-ui
Nate Pet
Nate Pet

Reputation: 46322

JQuery tab not showing properly

I tried the following in order to create Jquery tabs:

    <div id="tabs">
    <ul>
      <li><a href="#tabs-1">First</a></li>
      <li><a href="#tabs-2">Second</a></li>
      <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">
      <p>Tab 1 content</p>
    </div>
    <div id="tabs-2">
      <p>Tab 2 content</p>
    </div>
    <div id="tabs-3">
     <p>Tab 3 content</p>
    </div>
    </div>  

    <script type="text/javascript" language="javascript">
    $(document).ready(function () {

        $("#tabs").tabs();

    });
    </script>

What I show is the following:

First
Second
Third

Tab 1 content

Tab 2 content

Tab 3 content

Am I missing the necessary jquery library? Which one should I be using?

Upvotes: 1

Views: 3226

Answers (2)

Curtis
Curtis

Reputation: 103428

You need to include the jQuery UI css file.

Applying tabs() will set classes such as: ui-tabs-hide

But without the jQuery UI CSS file, your browser won't know to hide this element.

Using Google Chrome, Inspect element and you'll see the classes added to the elements. I've provided a jsfiddle as an example:

http://jsfiddle.net/TjNAw/

You can download and customise your jQuery UI CSS file from the theme roller here:

http://jqueryui.com/themeroller/

Upvotes: 0

Vinayak Phal
Vinayak Phal

Reputation: 8919

Have you included jQuery UI css and js file? You can add it from CDN like this.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

Upvotes: 2

Related Questions