jQuery UI tabs. How to select a tab based on its i

问题:

I have two tabs and configured usign jQuery UI.

ul  class="tabs"
  li  tabone
  li tabtwo
ul

dynamically from C# code behind I will hide or select some tab let say tabtwo and the other tab has to be hidden or not shown. I can do this in JavaScript using .tabs({selected:1}); and .tabs(disable:0). but I don't want to use the tab indexes to do so.

Is there any alternate to select tabs based on their name/id?

回答1:

Note: Due to changes made to jQuery 1.9 and jQuery UI, this answer is no longer the correct one. Please see @stankovski's answer below.

You need to find the tab's index first (which is just its position in a list) and then specifically select the tab using jQuery UI's provided select event (tabs->select).

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

Update: BTW - I do realize that this is (ultimately) still selecting by index. But, it doesn't require that you know the specific position of the tabs (particularly when they are dynamically generated as asked in the question).

回答2:

Accepted answer didn't work for me either, however I found solution in a similar thread: Switch to selected tab by name in 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);

回答3:

From the most recent document, the select method takes an index or the id of the tab's panel (the href hash value). The documentation states:

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).

So, given a layout like

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

the following works

$('#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's answer.

回答4:

It may have side effects if there are other listeners, and it doesn't feel as nice as interacting through the plugins API -- but it gives a less verbose code if you just "click" the tab, rather than count it's index and set it active afterwards, and it's pretty intuitive what's going on. Also it wont fail if the ui-guys decide to rename the option again.

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

It's intriguing, though, that the ui tabs code has a meta-function (_getIndex) with the comment:

"meta-function to give users option to provide a href string instead of a numerical index"

but does not use it when setting the active option, only when calling enable, disable and load.

回答5:

Active 1st tab

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

Active last tab

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

Active 2nd tab

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

Its work like an array

回答6:

None of these answers worked for me. I just by-passed the problem. I did 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.

回答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");

回答8:

As per UI Doc :

1. First get index of tab which you want to activate.

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

2. Activate it

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

回答9:

Building on @stankovski's answer, a more precise way of doing it which will work for all use cases (for example, when a tab is loading via ajax and so the anchor's href attribute doesn't correspond with the hash), the id in any case will correspond with the li element's "aria-controls" attribute. So for example if you are trying to activate a tab based on the location.hash, which is set to the tab id, 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);

In the case of setting and checking the url hash:

When creating the tabs, use the 'activate' event to set the location.hash to the panel id:

$('#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 window hashchange event to compare the location.hash to the panel id (do this by looking for the li element's aria-controls attribute):

$(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 where tabs use ajax. Also if you have nested tabs, it isn't too difficult to handle that either using a little more logic.

回答10:

I found this works more easily than getting an index. For my needs, I am selecting a tab based off a url hash

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

回答11:

This is the answer

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

回答12:

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

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

IF that assumption is correct, you simply use the ID to select the "tab"

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

EDIT: select the tab on your layout:

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

回答13:

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');
   }
}

回答14:

$("#tabs").tabs({active: [0,2], disabled: [3],selected: 2}); Where Selected is used for open Particular Tab or Select Particular Tab on onload.