[jquery] jQuery UI tabs. How to select a tab based on its id not based on index

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?

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

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.

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

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

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.

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

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.

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

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

This is the answer

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

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.

$("#tabs").tabs({active: [0,2], disabled: [3], selected: 2});

Where Selected is used for open Particular Tab or Select Particular Tab on onload.

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