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

Question

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.

Answer 1

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.

Answer 2

This one works for me:

$('a[href="#strains"]').click();