Question

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?

Answer 1

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

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