CODEWITHSUNDEEP
jqueryjquery-uijquery-selectorsjquery-ui-tabsjquery-tabs
oshirowanen
oshirowanen

Reputation: 15965

Force select a jQuery-ui-tab as default

At the moment, I have 2 separate functions which create tabs in the jquery tabs ui. It seems a bit random as to which tab generated from these 2 functions ends up being the tab which displays by default.

For example, if function tabs_a create 4 tabs, and function tabs_b create another 4 tabs, either the first tab from tabs_a is displayed as the default tab or the first tab from tabs_b is displayed as default.

How do I chose to display/select a specific tab automatically once both functions have finished loading/create the tabs?

For example, if function tabs_a creates:

tab_a_1
tab_a_2
tab_a_3
tab_a_4

and tabs_b creates:

tab_b_1
tab_b_2
tab_b_3
tab_b_4

at the moment, tab_a_1 or tab_b_1 will get selected by default, and it seems random which one of these 2 ends up getting selected by default.

How do I for example force tab_b_3 to become selected by default?

Upvotes: 3

Views: 2656

Answers (3)

tigerclaw
tigerclaw

Reputation: 9

Be aware that the 'select' method was removed from jQuery UI in v1.9. To accomplish what you're looking to do, just use the 'active' option to set the active tab:

$('#tab_b').tabs({ active: true });

OR

$('#tab_b').tabs('option', 'active', true);

Upvotes: 0

Redhot Lastname
Redhot Lastname

Reputation: 1

After creating the tabs.

//force select the tab
$("#tab_b").tabs("select", "tab_b_2");

Check it out here http://jsfiddle.net/75XFM/3/

Or check the code below:

<script type="text/javascript">
$("#tab_a").tabs();
$("#tab_b").tabs();
//force select the tab  
$("#tab_b").tabs("select", "tab_b_2");
</script> 


<div id="tab_a">
    <ul>
        <li><a href="#tab_a_1">TabA1</a>

        </li>
        <li><a href="#tab_a_2">TabA2</a>

        </li>
        <li><a href="#tab_a_3">TabA3</a>

        </li>
    </ul>
    <div id="tab_a_1">I'm Tab A1</div>
    <div id="tab_a_2">I'm Tab A2</div>
    <div id="tab_a_3">I'm Tab A3</div>
</div>
<div id="tab_b">
    <ul>
        <li><a href="#tab_b_1">TabA1</a>

        </li>
        <li><a href="#tab_b_2">TabA2</a>

        </li>
        <li><a href="#tab_b_3">TabA3</a>

        </li>
    </ul>
    <div id="tab_b_1">I'm Tab A1</div>
    <div id="tab_b_2">I'm Tab A2</div>
    <div id="tab_b_3">I'm Tab A3</div>
</div>

Upvotes: -1

U.P
U.P

Reputation: 7442

After the tabs are created, you can forcefully call the following

$("#tabs").tabs('select', "#tab_b_3");

Here, #tabs is the id of the div on which you have called the .tabs() function.

Upvotes: 2

Related Questions