Switch to selected tab by name in Jquery-UI Tabs
Jquery UiTabsJquery Ui Problem Overview
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
Jquery Ui Solutions
Solution 1 - Jquery Ui
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);
Solution 2 - Jquery Ui
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
Solution 3 - Jquery Ui
$('#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 });
Solution 4 - Jquery Ui
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);
Solution 5 - Jquery Ui
Only this code real works!
$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');
Solution 6 - Jquery Ui
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>
Solution 7 - Jquery Ui
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.
Solution 8 - Jquery Ui
The following piece worked for me
$($("#tabs")[0]).tabs({selected: 1});
Hope, this helps!
Solution 9 - Jquery Ui
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 });
Solution 10 - Jquery Ui
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.
Solution 11 - Jquery Ui
@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!
Solution 12 - Jquery Ui
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>
Solution 13 - Jquery Ui
$('#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();
Solution 14 - Jquery Ui
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() });
Solution 15 - Jquery Ui
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");
});