CODEWITHSUNDEEP
jqueryjquery-ui
j-p
j-p

Reputation: 3818

jQuery UI, how to preselect a tab

I've read this - Preselecting ajax-enabled tab in jquery UI tabs and tried the API docs...

here is the most basic code... http://jsfiddle.net/Xa2ur/

I want to be able to specify which tab is selected, but the syntax I can find doesn't work.

I will eventually pass a variable, but if I can't get the hard code to work, what good is taking the extra step.

any help - and "why" what I did didn't work is GREATLY appreciated.

the code

$( function() {
    $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error( function() {
                ui.panel.html( "Couldn't load this tab. We'll try to fix this as soon as possible." );
            });
        }
    });
});

-- Some other code --

<div id="tabs" >
        <ul>
            <li class="firsttab" ><a href="#tabs-1" >Wedding</a></li>
            <li class="" ><a href="#tabs-2" >Gig Feb 2013</a></li>
            <li class=""><a href="#tabs-3" >Homecoming</a></li>
        </ul>
        <div id="tabs-1" >
            <p>Description: Wedding Info</p>
            <p>photos</p>
        </div>
        <div id="tabs-2" >
            <p>Description: A gig @ TT the Bears</p>
            <p>blog</p>
        </div>
        <div id="tabs-3" >
            Stuff
        </div>
    </div>
    <script>
        $( "#tabs" ).tabs( "option", "active", 2 );
        // i HAVE also tried - $('#tabs').tabs({ selected: "2" });
    </script>

Upvotes: 3

Views: 1893

Answers (1)

user626963
user626963

Reputation: 

$( function() {
    $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error( function() {
                ui.panel.html( "Couldn't load this tab. We'll try to fix this as soon as possible." );
            });
        },
        active:2
    });
});

Upvotes: 4

Related Questions