CODEWITHSUNDEEP
jqueryjquery-ui
GeekedOut
GeekedOut

Reputation: 17185

How to get the jQuery tabs to work?

I am working from this example:

http://jqueryui.com/demos/tabs/

and trying to get the tabs to work like they look on this wireframe or at least close: http://problemio.com/wireframe.pdf

What I have so far is this query: 

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

and this html:

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

But for some reason this doesn't work at all and just shows the tabls as links that don't do anything. I am importing this js:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

What am I doing wrong?

Upvotes: 1

Views: 3565

Answers (2)

SPArcheon - on strike
SPArcheon - on strike

Reputation: 1289

Already experienced this issue myself. In my case, I'd forgot to add the css references for the jquery UI plugin. You don't seem to be adding them either.

Could you doublecheck if you have included the css? You should be able to use googleapis CDN - for example:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

Here you will find the list of available themes: JQuery-UI Blog - v1.8.16. They also provide links to the various available CDN locations (the above link was taken from there).

Upvotes: 3

aziz punjani
aziz punjani

Reputation: 25786

I think you may be missing the CSS. Try to include

http://jqueryui.com/themes/base/jquery.ui.all.css

Upvotes: 2

Related Questions