jqueryjquery-tabs

how to set a tab active in jQuery ui tab on page load

How can I make the final about page the default tab. I am using jQuery UI for showing these tabs.

<div id="tabs">
    <li class="ui-state-default ui-corner-top"><a href="#home">Home</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#strains">Strains</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#GB"> Browser</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#pathway">Pathway</a></li>
    <li id="pathway1" class="ui-state-default ui-corner-top"><a href="#pathway1">pathway1</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#About">About</a></li>

As far as I have found out it seems it has to be done the following way.

$('#tabs1').addClass('active')

But it is not working. I have following jQuery.

$( "#tabs" ).tabs();
$( "#pathway1").addClass('active');

I want to make pathway1 page active by default.

Solution

  • Setting a class will not change the default tab.

    Instead of

    $( "#tabs" ).tabs();

    Try this:

    $( "#tabs" ).tabs({ active: 4 });

    This will make the fifth (it is zero-indexed) tab the default active tab.