CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
lovestocodez
lovestocodez

Reputation: 57

jQuery UI Tabs non-functional

jQuery UI tabs does not even function, why? I've properly declared the function, applicable external resources loaded. No, it just sits there and does nothing. I had it working before where it would cycle between divs. Now, they just sit as static open divs, not even cycling anymore let alone loaing properly.

What am I trying to do? Get jQuery UI tabs to function again.

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

FIDDLE:

http://jsfiddle.net/rnzu8azz/1/

Upvotes: 0

Views: 42

Answers (2)

crashwap
crashwap

Reputation: 3068

First of all, your UL has to be inside the #tabs div:

<div id="tabs">
    <ul>
        <li> <a href="#tabs-1">ONE</a></li>
        <li> <a href="#tabs-2">TWO</a></li>
        <li> <a href="#tabs-3">THREE</a></li>
    </ul>
    <div id="tabs-1">TESTING 1</div>
    <div id="tabs-2">TESTING 2</div>
    <div id="tabs-3">TESTING 3</div>
</div>

jsFiddle One

Next, you might wish to use jQueryUI with an earlier version of jQuery -- see the effect in

jsFiddle Two

which uses jQuery 1.9.1 with jQueryUI 1.9.2

Upvotes: 1

ElGavilan
ElGavilan

Reputation: 6924

Just took a look at your fiddle. Your <ul> elements need to be inside of your #tabs div:

<div id="tabs">
    <ul>
        <li> <a href="#tabs-1">ONE</a>

        </li>
        <li> <a href="#tabs-2">TWO</a>

        </li>
        <li> <a href="#tabs-3">THREE</a>

        </li>
    </ul>
    <div id="tabs-1">TESTING 1</div>
    <div id="tabs-2">TESTING 2</div>
    <div id="tabs-3">TESTING 3</div>
</div>

Also, you did not include jquery UI in your fiddle.

Updated fiddle: http://jsfiddle.net/rnzu8azz/3/

Upvotes: 1

Related Questions