Passer à l'onglet sélectionné par son nom dans les onglets de Jquery-UI

Question

Si j'ai trois onglets :

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

Je voudrais passer à l'onglet #sample-tab-2 par son nom. Je sais que je peux passer à un onglet si je connais son numéro, mais dans le cas que j'ai rencontré, je ne le sais pas.

Notes : JQuery 1.3.1 / JQuery-UI 1.6rc6

Answer 1

Je n'ai pas réussi à faire fonctionner la réponse précédente. J'ai fait ce qui suit pour obtenir l'index de l'onglet par nom :

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

Answer 2

Il semble que l'utilisation de l'id fonctionne aussi bien que l'index, par exemple, en faisant simplement ceci, cela fonctionnera tout de suite...

$("#tabs").tabs("select", "#sample-tab-1");

Ceci est bien documenté dans le documents officiels :

" Sélectionner un onglet, comme s'il était cliqué. Le second argument est l'indice index basé sur zéro de l'onglet à sélectionner ou le sélecteur id du panneau du panneau auquel l'onglet est associé (l'identificateur de fragment href de l'onglet), par exemple un dièse, pointe vers l'identifiant du panneau). "

Je suppose que cela a été ajouté après que cette question ait été posée et probablement après la plupart des réponses.

Answer 3

$('#tabs').tabs('select', index); 

Les méthodes `'select' ne sont pas supportées dans jquery ui 1.10.0. http://api.jqueryui.com/tabs/

J'utilise ce code, et cela fonctionne correctement :

  $('#tabs').tabs({ active: index });

Answer 4

Vous pouvez obtenir l'index de l'onglet par son nom avec le script suivant :

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);

Answer 5

Seul ce code fonctionne réellement !

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');