CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Mark Griffiths
Mark Griffiths

Reputation: 13

jQuery tabs don't display as expected

I'm trying to put a lot of content into jquery tabs to make it look better, but everything I'm trying isn't working and I'm left with some bullet points followed by all the divs. I've gone through all the questions on here I can find, and applied the changes etc, but it's still not having it. Furthermore, I've copied the example from the jquery site into my text editor and opened that, but their own example also doesn't display properly. 

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

<style type="text/css">

body {
    font-family:verdana, helvetica;
    font-size:0.8em;
}


</style>


<div>
    <p>intro </p>
</div>

<div id="biography">
    <ul>
        <li><a href="#one"><span>one</span></a></li>
        <li><a href="#two"><span>two</span></a></li>
        <li><a href="#three"><span>three</span></a></li>
        <li><a href="#four"><span>four</span></a></li>
        <li><a href="#five"><span>five</span></a></li>
    </ul>

<div id="one">
    <p>text</p> 
</div>

<div id="two">
    <p>text</p>
</div>

<div id="three">
    <p>text</p> 
</div>

<div id="four">
    <p>text</p>
</div>

<div id="five">
    <p>text</p>
</div>

</div>

<script>
    $("biogaphy").tabs();
</script>

I'm still quite new to all this so I might be missing something obvious. I've tried removing the css that sets the font and that wouldn't work, and like I said, I've run the example from the site and that doesn't display as tabs either. I've tried opening it in chrome, firefox and ie, but they all display the same. I've uploaded it to my site to see if it works when live, but nothing doing. Can anyone help me please?!

Thanks in advance!

Upvotes: 1

Views: 917

Answers (1)

Ted
Ted

Reputation: 14927

There's a couple problems. First, add '#' to your selector, and wrap in a doc ready, like so:

$(document).ready(function () {
    $("#biography").tabs();
});

Without the #, jQuery is looking for an element with a tag name of biography, in stead of an element with an ID of biography.

Next, remove the spans inside the tab navigation anchors, like so:

<div id="biography">
    <ul>
        <li>
            <a href="#one">one</a>
        </li>
        <li>
            <a href="#two">two</a>
        </li>
        <li>
            <a href="#three">three</a>
        </li>
        <li>
            <a href="#four">four</a>
        </li>
        <li>
            <a href="#five">five</a>
        </li>
    </ul>
    <div id="one">
        <p>text 1</p>
    </div>
    <div id="two">
        <p>text 2</p>
    </div>
    <div id="three">
        <p>text 3</p>
    </div>
    <div id="four">
        <p>text 4</p>
    </div>
    <div id="five">
        <p>text 5</p>
    </div>
</div>

See it work in this fiddle

And remove these lines entirely:

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

Upvotes: 1

Related Questions