web-dev-qa-db-fra.com

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

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 échanger # échantillon-tab-2 par son nom. Je sais que je peux passer à un onglet si je connais son numéro, mais je ne le saurai pas dans le cas où je me suis heurté.

Remarques: JQuery 1.3.1/JQuery-UI 1.6rc6

jquery-uitabs
49
Rob

Je ne pouvais pas obtenir la réponse précédente au travail. 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);
84
Christian George

Il semble que l’utilisation de l’identifiant fonctionne aussi bien que celle de l’index, par exemple il suffit de le faire pour fonctionner hors de la boîte ...

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

Ceci est bien documenté dans la documentation officielle :

"Sélectionnez un onglet, comme s’il était cliqué. Le deuxième argument est l’indice Zéro de l’onglet à sélectionner ou le sélecteur id du panneau identifiant de fragment, 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

32
Eran Medan
$('#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 fonctionne correctement: 

  $('#tabs').tabs({ active: index });
26
hamid reza mansouri

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

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

Seul ce code fonctionne réellement!

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

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

La pièce suivante a fonctionné pour moi

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

J'espère que cela t'aides!

3
Sandeep

essayez ceci: onglet "select"/"active"

<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 supporte pas dans jquery ui version 1.10.0

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

autre solution: utiliser "actif":

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

Le seul moyen pratique d'obtenir l'index de base zéro de vos onglets consiste à passer en revue chacun des éléments qui constituent le tabset (le LI> A s) et à le faire correspondre à leur texte intérieur. Cela peut probablement être fait de 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 <input id = "reqTab"> caché dans la page pour m'assurer que la variable a été déplacée d'une fonction à l'autre.

NOTE: Il y a un peu de casse-tête - la sélection d'onglets une fois le tabset activé ne semble pas fonctionner comme annoncé dans jQuery UI 1.8, c'est pourquoi j'ai utilisé l'index identifié dès mon premier passage pour initialiser le tabset. avec l'onglet souhaité sélectionné.

3
Wes

Voici un exemple de code pour obtenir l'onglet sélectionné par nom. J'espère que cela vous aide à 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>
1
Vikram

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 m'avoir mis sur la bonne voie. Merci!

1
cautionbug

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

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

ou, vous pouvez attribuer un identifiant aux liens

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

vous pouvez donc trouver son identifiant.

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

Définissez l'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() });
0
Carl

J'ai eu du mal à obtenir une réponse quelconque, car elles étaient basées sur les anciennes versions de JQuery UI. Nous utilisons 1.11.4 ( Référence CDN ).

Voici mon Fiddle avec le code de travail: http://jsfiddle.net/6b0p02um/

    $("#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");
    });
0
David Pickering