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 swap to #sample-tab-2 by it's name. I know I can switch to a tab if I know it's number, but in the case I've run into I won't know that.
Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6
I could not get the previous answer to work. I did the following to get the index of the tab by name:
var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);
Set specific tab index as active:
$(this).tabs({ active: # }); /* Where # is the tab index. The index count starts at 0 */
Set last tab as active
$(this).tabs({ active: -1 });
Set specific tab by ID:
$(this).tabs({ active: $('a[href="#tab-101"]').parent().index() });
The only practical way to get the zero-based index of your tabs is to step through each of the elements that make the tabset (the LI>A s) and match on their inner text. It can probably be done in a cleaner way, but here's 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 in the page to make sure the variable moved from one function to the other.
NOTE: There is a little bit of a gotcha -- selecting tabs after the tabset is activated doesn't seem to work as advertised in jQuery UI 1.8, which is why I used the identified index from my first pass in order to initialize the tabset with the desired tab selected.
You can get the index of the tab by name with the following script:
var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);
@bduke's answer actually works with a slight tweak.
var index = $("#tabs>div").index($("#simple-tab-2"));
$("#tabs").tabs("select", index);
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 tab's ID/HREF selector, but when constructing the tabs, the "selected" Option still only supports the numeric index.
My vote goes to bdukes for getting me on the right track. Thanks!
Here is a sample code to get the selected tab by name. I hope this aids you to 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>
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' does not support in jquery ui version 1.10.0
$('#gtabs').tabs('select', index);
alternate solution: use "active":
$('#gtabs').tabs({ active: index });
It seems that using the id works as well as the index, e.g. simply doing this will work out of the box...
$("#tabs").tabs("select", "#sample-tab-1");
This is well documented in the official docs:
"Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id)."
I assume this was added after this question was asked and probably after most of the answers
Only this code real works!
$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');
The following piece worked for me
$($("#tabs")[0]).tabs({selected: 1});
Hope, this helps!
$('#tabs').tabs('select', index);
Methods `'select' isn't support in jquery ui 1.10.0.http://api.jqueryui.com/tabs/
I use this code , and work correctly:
$('#tabs').tabs({ active: index });
If you are changing the hrefs, you can assign an id to the links <a href="#sample-tab-1" id="tab1"><span>One</span></a> so you can find the tab index by it's id.
$('#tabs a[href="#sample-tab-1"]').click();
or, you can assign an id to the links
<a href="#sample-tab-1" id="tab1">span>One</span></a>
so you can find it's id.
$('#tab1').click();
Use this function:
function uiTabs(i){
$("#tabs").tabs("option", "selected", i);
}
And use 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>
I had trouble getting any of the answers to work as they were based on the older versions of JQuery UI. We're using 1.11.4 (CDN Reference).
Here is my Fiddle with working code: http://jsfiddle.net/6b0p02um/ I ended up splicing together bits from four or five different threads to get mine to 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");
});
Source: Stackoverflow.com