CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Max25
Max25

Reputation: 587

jQuery UI not working in tabs

Below is the link of my code which is working fine in Fiddle

Fiddle Link : http://jsfiddle.net/JdU8N/

But the same code doesn't work in my local . I have properly loaded the jQuery files and have initiated the tabs in $(document).ready(function(){}); . With firebug , i don't get any error too

This is my code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
        <script>
            $(document).ready(function() {
                $('.tabs').tabs();
                $('.subtabs').tabs({
                    activate: function(event, ui) {
                        //get relative li index
                        var secondTabSelected = $(ui.newTab).index();
                        console.log(secondTabSelected);
                    }
                });
            });
        </script>
    </head>

    <body>
        <div class="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
            </ul>
            <div id="tabs-1">
                <div class="subtabs">
                    <ul>
                        <li><a href="#tabs-1a">Tab 1-A</a></li>
                        <li><a href="#tabs-1b">Tab 1-B</a></li>
                    </ul>
                    <div id="tabs-1a">
                        <p>Tab 1A</p>
                    </div>
                    <div id="tabs-1b">
                        <p>Tab 1B</p>
                    </div>
                </div>
            </div>
            <div id="tabs-2">
                <div class="subtabs">
                    <ul>
                        <li><a href="#tabs-2a">Tab 2-A</a></li>
                        <li><a href="#tabs-2b">Tab 2-B</a></li>
                    </ul>
                    <div id="tabs-2a">
                        <p>Tab 2A</p>
                    </div>
                    <div id="tabs-2b">
                        <p>Tab 2B</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Any help would be appreciated ...

Upvotes: 1

Views: 2390

Answers (2)

vineet
vineet

Reputation: 336

You need to add a jquery-ui.css file. It is missing there :)

You can find links for several themes for ui css here

Upvotes: 2

PSL
PSL

Reputation: 123739

Your tabs must be getting created but there is no jquery ui stylesheet loaded in your html which is required to give the appearance to the tabs.

You can download the css with themes from jquery ui website

Here is a CDN location for lightness theme.

Here you go a Demo Fiddle with your html markup and css applied to it.

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css"/>

Here is a SO answer that mentions about jquery UI CDN path for all themes.

Upvotes: 5

Related Questions