Switch to selected tab by name in Jquery-UI Tabs

Question

If I have three tabs    lt div id  tabs  gt       lt ul gt           lt li gt  lt a href   sample-tab-1  gt  lt span gt One lt  span gt  lt  a gt  lt  li gt           lt li gt  lt a href   sample-tab-2  gt  lt span gt Two lt  span gt  lt  a gt  lt  li gt           lt li gt  lt a href   sample-tab-3  gt  lt span gt Three lt  span gt  lt  a gt  lt  li gt       lt  ul gt   lt  div gt    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

User · Answer

Here is a sample code to get the selected tab by name  I hope this aids you to find ypur solution    lt html gt   lt head gt   lt script type  text javascript  gt  lt  -- Don t forget jquery and jquery ui  js files-- gt  lt  script gt   lt script type  text javascript  gt       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                     lt  script gt   lt  head gt   lt body gt      lt div id  tabs  gt         lt ul id  tablist  gt               lt li gt  lt a href  forms form1 html  title  form 1  gt  lt span gt Form 1 lt  span gt  lt  a gt  lt  li gt               lt li gt  lt a href  forms form2  title  form 2  gt  lt span gt Form 2 lt  span gt  lt  a gt  lt  li gt         lt  ul gt      lt  div gt       lt button id  button-id  gt ClickMe lt  button gt   lt  body gt   lt  html gt

User · Answer

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  lt input id  reqTab  gt  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

User · Answer

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

User · Answer

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

User · Answer

The following piece worked for me         tabs   0   tabs  selected  1     Hope  this helps

User · Answer

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

User · Answer

try this   select     active  tab   lt article id  gtabs  gt       lt ul gt           lt li gt  lt a href   syscfg  id  tab-sys-cfg  class  tabtext  gt tab One lt  a gt  lt  li gt           lt li gt  lt a href   ebsconf  id  tab-ebs-trans  class  tabtext  gt tab Two lt  a gt  lt  li gt           lt li gt  lt a href   genconfig  id  tab-general-filter-config  class  tabtext  gt tab Three lt  a gt  lt  li gt       lt  ul gt      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

User · Answer

tabs a href   sample-tab-1     click      or  you can assign an id to the links   lt a href   sample-tab-1  id  tab1  gt span gt One lt  span gt  lt  a gt    so you can find  it s id       tab1   click

User · Answer

Only this code real works       tabs   tabs        tabs   tabs  select     sample-tab-2

User · Answer

Use this function    function uiTabs i           tabs   tabs  option    selected   i       And use following code to switch between tabs    lt a onclick  uiTabs 0   gt Tab 1 lt  a gt   lt a onclick  uiTabs 1   gt Tab 2 lt  a gt   lt a onclick  uiTabs 2   gt Tab 3 lt  a gt

User · Answer

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

User · Answer

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  lt li gt  relative to the div it is contained within         btn tab3   click function                   tabs    tabs   option    active   2                            selects the tab by id of the  lt li gt          btn tab3 id   click function            function selectTab tabName                  tabs   tabs  option    active     tabName       index                    selectTab   li ui id 3

User · Answer

If you are changing the hrefs  you can assign an id to the links  lt a href   sample-tab-1  id  tab1  gt  lt span gt One lt  span gt  lt  a gt  so you can find the tab index by it s id

User · Answer

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

User · Answer

bduke s answer actually works with a slight tweak   var index       tabs gt div   index     simple-tab-2         tabs   tabs  select   index     Above assumes something similar to    lt div id  tabs  gt     lt ul gt       lt li gt  lt a href   simple-tab-0  gt Tab 0 lt  a gt  lt  li gt       lt li gt  lt a href   simple-tab-1  gt Tab 1 lt  a gt  lt  li gt       lt li gt  lt a href   simple-tab-2  gt Tab 2 lt  a gt  lt  li gt       lt li gt  lt a href   simple-tab-3  gt Tab 3 lt  a gt  lt  li gt     lt  ul gt     lt div id  simple-tab-0  gt  lt  div gt     lt div id  simple-tab-1  gt  lt  div gt     lt div id  simple-tab-2  gt  lt  div gt     lt div id  simple-tab-3  gt  lt  div gt   lt  div gt    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

[jquery-ui] Switch to selected tab by name in Jquery-UI Tabs

Examples related to jquery-ui

Examples related to tabs