How to get the jQuery tabs to work?

Question

I am working from this example:

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?

I don't see any Tabs in the wireframe, or don't recognise them — yunzen
– yunzen, Commented Oct 20, 2011 at 13:38
@HerrSerker thats because they look like links :) saying "tab 1, tab 2, tab 3" — GeekedOut
– GeekedOut, Commented Oct 20, 2011 at 13:40
Maybe your code isn't called at all. try an alert(1) before the call to tabs() and see, if the alert is executed. — yunzen
– yunzen, Commented Oct 20, 2011 at 13:43
@Interstellar_Coder the css for the whole site or just the tabs? — GeekedOut
– GeekedOut, Commented Oct 20, 2011 at 13:44

SPArcheon - on strike · Accepted Answer · 2011-10-20 13:51:28Z

3

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).

edited Oct 20, 2011 at 13:51

answered Oct 20, 2011 at 13:46

SPArcheon - on strike

1,2791 gold badge19 silver badges36 bronze badges

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

Comments

aziz punjani · Accepted Answer · 2011-10-20 13:44:53Z

2

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

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

answered Oct 20, 2011 at 13:44

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

3 Comments

GeekedOut Over a year ago

adding that line gave an error message for unexpected token. Here is what I added: <script type="text/javascript" src="jqueryui.com/themes/base/jquery.ui.all.css"></script>

aziz punjani Over a year ago

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css"> or <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">

aziz punjani Over a year ago

It's a stylesheet! Not a script!

Collectives™ on Stack Overflow

How to get the jQuery tabs to work?

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related