Basculer vers l'onglet sélectionné par nom dans les onglets jQuery-UI

Il semble que l'utilisation de l'id fonctionne aussi bien que l'index, par exemple, le simple fait de faire cela fonctionnera hors de la boîte...

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

Ceci est bien documenté dans les documents officiels :

" Sélectionnez un onglet, comme s'il avait été cliqué. Le deuxième argument est le index zéro de l'onglet à sélectionner ou du sélecteur d'id du panneau auquel l'onglet est associé (l'identifiant de fragment HREF de l'onglet, par exemple hash, pointe vers l'id du panneau)."

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

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

Méthodes "select' n'est pas pris en charge dans jQuery ui 1.10.0. http://api.jqueryui.com/tabs/

J'utilise ce code, et fonctionne correctement:

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

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

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

Seul ce code fonctionne vraiment!

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

Utilisez cette fonction:

function uiTabs(i){
    $("#tabs").tabs("option", "selected", i);
}

Et utilisez le code suivant pour basculer entre les onglets:

<a onclick="uiTabs(0)">Tab 1</a>
<a onclick="uiTabs(1)">Tab 2</a>
<a onclick="uiTabs(2)">Tab 3</a>

La seule façon pratique d'obtenir l'index basé sur zéro de vos onglets est de parcourir chacun des éléments qui font le tabset (le LI>A s) et de correspondre à leur texte interne. Il peut probablement être fait d'une manière plus propre, mais voici comment je l'ai fait.

$('#tabs ul li a').each(function(i) {
    if (this.text == 'Two') {$('#reqTab').val(i)}
});

$("#tabs").tabs({
    selected: $('#reqTab').val()
});

Vous pouvez voir que j'ai utilisé un champ caché dans la page pour m'assurer que la variable est passée d'une fonction à l'autre.

NOTE: Il y a un peu de gotcha - sélection des onglets après l'activation du tabset ne semble pas fonctionner comme annoncé dans jQuery UI 1.8, c'est pourquoi j'ai utilisé l'index identifié de ma première passe afin d'initialiser le tabset avec l'onglet désiré sélectionné.

La pièce suivante a fonctionné pour moi

$($("#tabs")[0]).tabs({selected: 1});

Espoir, cela aide!

Essayez ceci: onglet" Sélectionner " / "actif"

<article id="gtabs">
    <ul>
        <li><a href="#syscfg" id="tab-sys-cfg" class="tabtext">tab One</a></li>
        <li><a href="#ebsconf" id="tab-ebs-trans" class="tabtext">tab Two</a></li>
        <li><a href="#genconfig" id="tab-general-filter-config" class="tabtext">tab Three</a></li>
    </ul>

var index = $('#gtabs a[href="#general-filter-config"]').parent().index();

/ / "select" ne prend pas en charge dans la version 1.10.0 de l'interface utilisateur jquery

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

Solution alternative: utiliser "active":

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

Si vous modifiez les hrefs, vous pouvez attribuer un id aux liens <a href="#sample-tab-1" id="tab1"><span>One</span></a> afin que vous puissiez trouver l'index de l'onglet par son id.

La réponse de@bduke fonctionne en fait avec un léger tweak.

var index = $("#tabs>div").index($("#simple-tab-2"));
$("#tabs").tabs("select", index);

Ci-dessus suppose quelque chose de similaire à:

<div id="tabs">
  <ul>
    <li><a href="#simple-tab-0">Tab 0</a></li>
    <li><a href="#simple-tab-1">Tab 1</a></li>
    <li><a href="#simple-tab-2">Tab 2</a></li>
    <li><a href="#simple-tab-3">Tab 3</a></li>
  </ul>
  <div id="simple-tab-0"></div>
  <div id="simple-tab-1"></div>
  <div id="simple-tab-2"></div>
  <div id="simple-tab-3"></div>
</div>

JQueryUI prend désormais en charge l'appel "select" à l'aide du sélecteur ID/HREF de l'onglet, mais lors de la construction des onglets, l'Option "selected" ne prend toujours en charge que l'index numérique.

Mon vote va à bdukes pour me mettre sur la bonne voie. Merci!

Voici un exemple de code pour obtenir l'onglet sélectionné par nom. J'espère que cela vous aidera à trouver la solution ypur:

<html>
<head>
<script type="text/javascript"><!-- Don't forget jquery and jquery ui .js files--></script>
<script type="text/javascript">
   $(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());
     });
  });
</script>
</head>
<body>
   <div id="tabs">
      <ul id="tablist">
            <li><a href='forms/form1.html' title="form_1"><span>Form 1</span></a></li>
            <li><a href='forms/form2' title="form_2"><span>Form 2</span></a></li>
      </ul>
   </div>
    <button id="button-id">ClickMe</button>
</body>
</html>

J'ai eu du mal à faire fonctionner l'une des réponses car elles étaient basées sur les anciennes versions de L'interface utilisateur JQuery. Nous utilisons 1.11.4 ( référence CDN ).

Voici mon violon avec le code de travail: http://jsfiddle.net/6b0p02um/ J'ai fini par épisser des morceaux de quatre ou cinq fils différents pour que le mien fonctionne:

    $("#tabs").tabs(); 

    //selects the tab index of the <li> relative to the div it is contained within
    $(".btn_tab3").click(function () {
        $( "#tabs" ).tabs( "option", "active", 2 );
    });         

    //selects the tab by id of the <li>
    $(".btn_tab3_id").click(function () {
      function selectTab(tabName) {
          $("#tabs").tabs("option", "active", $(tabName + "").index());
      }

      selectTab("#li_ui_id_3");
    });

$('#tabs a[href="#sample-tab-1"]').click();

Ou, vous pouvez attribuer un id aux liens

<a href="#sample-tab-1" id="tab1">span>One</span></a>

Donc vous pouvez trouver son id.

$('#tab1').click();

Définir un index de tabulation spécifique comme actif:

$(this).tabs({ active: # }); /* Where # is the tab index. The index count starts at 0 */

Définir le dernier onglet comme actif

$(this).tabs({ active: -1 });

Définir un onglet spécifique par ID:

$(this).tabs({ active: $('a[href="#tab-101"]').parent().index() });