JQuery UI Tabs How to select a tab based on its non-index based identifier

Question

Hi, I have two tabs and a customized jquery user interface.

ul class="tabs" li tabone li tabtwo ul 

dynamically from the C # code behind I'll hide or select some tab let say tabtwo and the other tab should be hidden or not shown. I can do this in java script using .tabs({selected:1}); and .tabs(disable:0). but I do not want to use tab indices for this. is there an alternative to choosing tabs based on their name / id?

Answer 1

Note. Due to changes made to jQuery 1.9 and jQuery UI, this answer is no longer correct. Please refer to @stankovski below.

First you need to first specify the index of the tabs (which is its position in the list), and then specifically select the tab using jQuery UI, provided that the event is selected ( tabs-> select ).

 var index = $('#tabs ul').index($('#tabId')); $('#tabs ul').tabs('select', index); 

Update:. By the way, I understand that this is (ultimately) a choice by index. But this does not require you to know the specific position of the tabs (especially when they are dynamically generated, as asked in the question).

Answer 2

The accepted answer didn’t work for me either, however I found a solution in a similar thread: Switch to the selected tab by name in the JQuery-UI tabs

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

With jQuery UI> = 1.9:

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

Answer 3

From the most recent document, the select method accepts the index or identifier of the tab bar (hash value href). The documentation states:

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

So, given the layout, for example

 <div id="myTabs"> <ul class="tabs"> <li><a href="#tabone">tabone</a></li> <li><a href="#tabtwo">tabtwo</a></li> </ul> </div> 

following work

 $('#myTabs').tabs('select', '#tabtwo'); 

Here is an example .

UPDATE

The above solution works in jQuery UI versions less than 1.9. For a solution in versions 1.9+ see @stankovski answer .

Answer 4

It can have side effects if there are other listeners, and it's not as nice as interacting with the plugins API, but it gives less detailed code if you just click the tab and don’t consider its index and set it active afterwards, and it is pretty intuitively clear what is happening. Also, it will not work if the u-guys decide to rename the parameter again.

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

Interestingly, the ui tabs code has a meta function ( _getIndex ) with a comment:

"to enable users to specify the href string instead of a numeric index"

but does not use it when setting the active parameter, only when activating a call, disconnecting and loading.

Answer 5

Active first tab

$ ("# workflowTab"). tabs ({active: 0});

Last active tab

$ ("# workflowTab"). tabs ({active: -1});

Active second tab

$ ("# workflowTab"). tabs ({active: 1});

His work is like an array

Answer 6

None of these answers worked for me. I just missed the problem. I have done this:

 $('#tabs-tab1').removeClass('tabs-hide'); $('#tabs-tab2').addClass('tabs-hide'); $('#container-tabs a[href="#tabs-tab2"]').parent().removeClass('tabs-selected'); $('#container-tabs a[href="#tabs-tab1"]').parent().addClass('tabs-selected'); 

It works great.

Answer 7

  <div id="tabs" style="width: 290px"> <ul > <li><a id="myTab1" href="#tabs-1" style="color: Green">Báo cáo chuẩn</a></li> <li><a id="myTab2" href="#tabs-2" style="color: Green">Báo cáo mở rộng</a></li> </ul> <div id="tabs-1" style="overflow-x: auto"> <ul class="nav"> <li><a href="@Url.Content("~/Report/ReportDate")"><span class=""></span>Báo cáo theo ngày</a></li> </ul> </div> <div id="tabs-2" style="overflow-x: auto; height: 290px"> <ul class="nav"> <li><a href="@Url.Content("~/Report/PetrolReport#tabs-2")"><span class=""></span>Báo cáo nhiên liệu</a></li> </ul> </div> </div> var index = $("#tabs div").index($("#tabs-1" )); $("#tabs").tabs("select", index); $("#tabs-1")[0].classList.remove("ui-tabs-hide"); 

Answer 8

According to UI Doc:

• First get the index of the tab you want to activate.

   var index = $('#tabs a[href="'+id+'"]').parent().index(); 

• Activate it

   tabs.tabs( "option", "active", index ); 

Answer 9

Based on @stankovski's answer, a more accurate way to do this, which will work for all use cases (for example, when a tab is loaded via ajax, and therefore the href attribute of the binding does not match the hash), id will in any case correspond to the aria li attribute attribute -controls ". For example, if you are trying to activate a tab based on location.hash that is set to a tab identifier, then it is better to look for "aria-controls" than for "href".

With jQuery UI> = 1.9:

 var index = $('#tabs > ul > li[aria-controls="simple-tab-2"]').parent().index(); $("#tabs").tabs("option", "active", index); 

If you install and verify the hash of the URL:

When creating tabs, use the "activate" event to set location.hash to the panel identifier:

 $('#tabs').tabs({ activate: function(event, ui) { var scrollTop = $(window).scrollTop(); // save current scroll position window.location.hash = ui.newPanel.attr('id'); $(window).scrollTop(scrollTop); // keep scroll at current position } }); 

Then use the hashchange event of the window to compare location.hash with the panel id (do this by looking for the aria-controls attribute of the li element):

 $(window).on('hashchange', function () { if (!location.hash) { $('#tabs').tabs('option', 'active', 0); return; } $('#tabs > ul > li').each(function (index, li) { if ('#' + $(li).attr('aria-controls') == location.hash) { $('#tabs').tabs('option', 'active', index); return; } }); }); 

This will handle all cases, even if the tabs use ajax. In addition, if you have nested tabs, it is not so difficult to handle, or using a little more logic.

Answer 10

I found this working easier than getting the index. For my needs I select a url hash based tab

 var target = window.location.hash.replace(/#/,'#tab-'); if (target) { jQuery('a[href='+target+']').click().parent().trigger('keydown'); } 

Answer 11

I make a wild assumption that you really have a layout:

 <ul class="tabs"> <li id="tabone">one</li> <li id="tabtwo">two</li> </ul> 

IF this assumption is correct, you simply use the identifier to select the "tab"

 $('#tabone').css("display","none"); 

EDIT: select tab in layout:

 var index = $('.tabs ul').index($('#tabone')); $('.tabs ul').tabs('select', index); 

Answer 12

I did it like this:

 if (document.location.hash != '') { //get the index from URL hash var tabSelect = document.location.hash.substr(1, document.location.hash.length); console.log("tabSelect: " + tabSelect); if (tabSelect == 'discount') { var index = $('#myTab a[href="#discount"]').parent().index(); $("#tabs").tabs("option", "active", index); $($('#myTab a[href="#discount"]')).tab('show'); } } 

Answer 13

$ ("# tabs"). tabs ({active: [0,2], disabled: [3], selected: 2}); If selected, used to open a separate tab or select a special tab at startup.