jQuery UI tabs How to select a tab based on its id not based on index

Question

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

User · Answer

lt div id  tabs  style  width  290px  gt                       lt ul  gt                           lt li gt  lt a id  myTab1  href   tabs-1  style  color  Green  gt B  o c  o chu n lt  a gt  lt  li gt                           lt li gt  lt a id  myTab2  href   tabs-2  style  color  Green  gt B  o c  o m  r ng lt  a gt  lt  li gt                       lt  ul gt                       lt div id  tabs-1  style  overflow-x  auto  gt                           lt ul class  nav  gt                                lt li gt  lt a href   Url Content    Report ReportDate    gt  lt span class    gt  lt  span gt B  o c  o theo ng  y lt  a gt  lt  li gt                            lt  ul gt                       lt  div gt                       lt div id  tabs-2  style  overflow-x  auto  height  290px  gt                           lt ul class  nav  gt                                lt li gt  lt a href   Url Content    Report PetrolReport tabs-2    gt  lt span class    gt  lt  span gt B  o c  o nhi  n li u lt  a gt  lt  li gt                           lt  ul gt                       lt  div gt                   lt  div gt            var index       tabs div   index     tabs-1                  tabs   tabs  select   index              tabs-1   0  classList remove  ui-tabs-hide

User · Answer

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    lt div id  myTabs  gt           lt ul  class  tabs  gt         lt li gt  lt a href   tabone  gt tabone lt  a gt  lt  li gt         lt li gt  lt a href   tabtwo  gt tabtwo lt  a gt  lt  li gt       lt  ul gt      lt  div gt    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

User · Answer

tabs   tabs  active   0 2   disabled   3   selected  2      Where Selected is used for open Particular Tab or Select Particular Tab on onload

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I make a wild assumption that you really have layout as    lt ul  class  tabs  gt     lt li id  tabone  gt one lt  li gt     lt li id  tabtwo  gt two lt  li gt   lt  ul gt    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

User · Answer

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

User · Answer

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

User · Answer

This is the answer  var index       tabs a href   simple-tab-2     parent   index        tabs   tabs  option    active   index

User · Answer

As per UI Doc     First get index of tab which you want to activate   var index       tabs a href    id       parent   index     Activate it  tabs tabs   option    active   index

User · Answer

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

User · Answer

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  gt  ul  gt  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  gt  ul  gt  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

User · Answer

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

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

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-plugins

Examples related to jquery-selectors

Examples related to ui-select2