Switch to selected tab by name in jQuery-UI tabs

Question

If I have three tabs:

<div id="tabs"> <ul> <li><a href="#sample-tab-1"><span>One</span></a></li> <li><a href="#sample-tab-2"><span>Two</span></a></li> <li><a href="#sample-tab-3"><span>Three</span></a></li> </ul> </div> 

I would like to change to # sample-tab-2 by his name. I know that I can switch to the tab if I know its number, but in the case when I encounter, I do not know this.

Notes: jQuery 1.3.1 / jQuery-UI 1.6rc6

Answer 1

I could not get the previous answer to the job. I did the following to get the tab index by name:

 var index = $('#tabs a[href="#simple-tab-2"]').parent().index(); $('#tabs').tabs('select', index); 

Answer 2

It seems that using id works just like an index, for example it just works out of the box ...

 $("#tabs").tabs("select", "#sample-tab-1"); 

This is well described in white papers:

"Select the tab as if it were pressed. The second argument is the zero index of the tab to be selected , or the identifier selector of the panel that the tab is associated with (the identifier of a href table fragment, such as a hash, indicates the panel identifier). "

I assume this was added after this question was asked and probably after most of the answers

Answer 3

 $('#tabs').tabs('select', index); 

The `` select '' methods are not supported by jquery ui 1.10.0. http://api.jqueryui.com/tabs/

I am using this code and working correctly:

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

Answer 4

You can get the tab index by name with the following script:

 var index = $('#tabs ul').index($('#simple-tab-2')); $('#tabs ul').tabs('select', index); 

Answer 5

Only real code works!

 $('#tabs').tabs(); $('#tabs').tabs('select', '#sample-tab-2'); 

Answer 6

Use this function:

 function uiTabs(i){ $("#tabs").tabs("option", "selected", i); } 

And use the following code to switch between tabs:

 <a onclick="uiTabs(0)">Tab 1</a> <a onclick="uiTabs(1)">Tab 2</a> <a onclick="uiTabs(2)">Tab 3</a> 

Answer 7

The only practical way to get the zero index of your tabs is to go through each of the elements that make the tabset (LI> A s) and match their inner text. It may be possible to do it in a cleaner way, but here is how I did it.

 $('#tabs ul li a').each(function(i) { if (this.text == 'Two') {$('#reqTab').val(i)} }); $("#tabs").tabs({ selected: $('#reqTab').val() }); 

You can see that I used a hidden <input id = "reqTab"> field on the page so that the variable moves from one function to another.

NOTE. There are few tab selection options after activating the tablets, it doesn't seem to work as advertised in jQuery UI 1.8, so I used the identified index from my first pass to initialize the tab with the selected tab.

Answer 8

The following snippet worked for me

$($("#tabs")[0]).tabs({selected: 1});

Hope this helps!

Answer 9

try this: select / active tab

 <article id="gtabs"> <ul> <li><a href="#syscfg" id="tab-sys-cfg" class="tabtext">tab One</a></li> <li><a href="#ebsconf" id="tab-ebs-trans" class="tabtext">tab Two</a></li> <li><a href="#genconfig" id="tab-general-filter-config" class="tabtext">tab Three</a></li> </ul> 

 var index = $('#gtabs a[href="#general-filter-config"]').parent().index(); 

// `` select 'is not supported in jquery ui version 1.10.0

 $('#gtabs').tabs('select', index); 

alternative solution: use "active":

 $('#gtabs').tabs({ active: index }); 

Answer 10

If you change hrefs, you can assign id to links <a href="#sample-tab-1" id="tab1"><span>One</span></a> so that you can find the index of the tab by its identifier .

Answer 11

The answer to @bduke actually works with a little tweaking.

 var index = $("#tabs>div").index($("#simple-tab-2")); $("#tabs").tabs("select", index); 

The above assumes something similar to:

 <div id="tabs"> <ul> <li><a href="#simple-tab-0">Tab 0</a></li> <li><a href="#simple-tab-1">Tab 1</a></li> <li><a href="#simple-tab-2">Tab 2</a></li> <li><a href="#simple-tab-3">Tab 3</a></li> </ul> <div id="simple-tab-0"></div> <div id="simple-tab-1"></div> <div id="simple-tab-2"></div> <div id="simple-tab-3"></div> </div> 

jQueryUI now supports calling "select" using the ID / HREF selector, but when building tabs, the "selected" option still only supports a numeric index.

My voice goes to bdukes for taking me on the right track. Thank!

Answer 12

Here is a sample code to get the selected tab by name. Hope this helps you find ypur solution:

 <html> <head> <script type="text/javascript"><!-- Don't forget jquery and jquery ui .js files--></script> <script type="text/javascript"> $(document).ready(function(){ $('#tabs').show(); // shows the index and tab title selected $('#button-id').button().click(function(){ var selTab = $('#tabs .ui-tabs-selected'); alert('tab-selected: '+selTab.index()+'-'+ selTab.text()); }); }); </script> </head> <body> <div id="tabs"> <ul id="tablist"> <li><a href='forms/form1.html' title="form_1"><span>Form 1</span></a></li> <li><a href='forms/form2' title="form_2"><span>Form 2</span></a></li> </ul> </div> <button id="button-id">ClickMe</button> </body> </html> 

Answer 13

I'm having trouble getting any answers to work, as they were based on older versions of JQuery UI. We use 1.11.4 ( CDN Link ).

Here is my working code script: http://jsfiddle.net/6b0p02um/ I ended up splicing bits from four or five different threads to make mine work:

  $("#tabs").tabs(); //selects the tab index of the <li> relative to the div it is contained within $(".btn_tab3").click(function () { $( "#tabs" ).tabs( "option", "active", 2 ); }); //selects the tab by id of the <li> $(".btn_tab3_id").click(function () { function selectTab(tabName) { $("#tabs").tabs("option", "active", $(tabName + "").index()); } selectTab("#li_ui_id_3"); });