Switch to selected tab by name in Jquery-UI Tabs

Question

If I have three tabs:

<div id="tabs">     <ul>         <li><a href="#sample-tab-1"><span>One</span></a></li>         <li><a href="#sample-tab-2"><span>Two</span></a></li>         <li><a href="#sample-tab-3"><span>Three</span></a></li>     </ul> </div> 

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

Answer 1

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

Answer 2

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