Onglets de l’interface utilisateur jQuery. Comment sélectionner un onglet en fonction de son identifiant non basé sur un index

J’ai deux tabs et configuré avec l’interface utilisateur jQuery.

ul class="tabs" li tabone li tabtwo ul 

dynamicment à partir du code C # derrière je cacherai ou sélectionnerai un onglet disons tabtwo et l’autre onglet doit être caché ou non montré. Je peux le faire en JavaScript en utilisant .tabs({selected:1}); et .tabs(disable:0). mais je ne veux pas utiliser les index de tabulation pour le faire.

Existe-t-il un autre moyen de sélectionner les tabs en fonction de leur nom / identifiant?

Remarque: en raison des modifications apscopes à jQuery 1.9 et à l’interface utilisateur jQuery, cette réponse n’est plus la bonne. S’il vous plaît voir la réponse de @ stankovski ci-dessous.

Vous devez d’abord trouver l’index de l’onglet (qui ne représente que sa position dans une liste), puis sélectionner spécifiquement l’onglet en utilisant l’événement select de l’interface utilisateur jQuery ( tabs-> select ).

 var index = $('#tabs ul').index($('#tabId')); $('#tabs ul').tabs('select', index); 

Mise à jour: BTW – Je me rends compte que ceci (en fin de compte) sélectionne toujours par index. Mais, cela ne nécessite pas de connaître la position spécifique des tabs (en particulier lorsqu’ils sont générés dynamicment, comme demandé dans la question).

La réponse acceptée n’a pas fonctionné pour moi non plus, mais j’ai trouvé la solution dans un thread similaire: Basculer vers l’onglet sélectionné par nom dans les tabs Jquery-UI

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

Avec l’interface utilisateur jQuery> = 1.9:

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

A partir du document le plus récent, la méthode select prend un index ou l’identifiant du panneau de l’onglet (la valeur de hachage href). La documentation indique:

Sélectionnez un onglet, comme s’il avait été cliqué. Le second argument est l’index de base zéro de l’onglet à sélectionner ou le sélecteur d’ID du panneau auquel l’onglet est associé (l’identificateur de fragment href de l’onglet, par exemple le hachage, pointe sur l’ID du panneau).

Donc, étant donné une disposition comme

  

les oeuvres suivantes

 $('#myTabs').tabs('select', '#tabtwo'); 

Voici un exemple .

METTRE À JOUR

La solution ci-dessus fonctionne dans les versions de jQuery UI inférieures à 1.9. Pour une solution dans les versions 1.9+, voir la réponse de @ stankovski.

Cela peut avoir des effets secondaires s’il y a d’autres écouteurs, et cela ne semble pas aussi agréable que d’interagir via l’API des plugins – mais cela donne un code moins prolixe si vous cliquez simplement sur l’onglet, plutôt que de compter son index. il est actif après, et c’est assez intuitif ce qui se passe. De plus, cela ne manquera pas si les utilisateurs décident de renommer l’option.

 $('#tabs').tabs(); $('#tabs a[href="#tabtwo"]').click(); 

Il est insortingguant, cependant, que le code des tabs de l’ _getIndex ait une méta-fonction ( _getIndex ) avec le commentaire:

“meta-function pour donner aux utilisateurs l’option de fournir une chaîne href au lieu d’un index numérique”

mais ne l’utilise pas lors de la définition de l’option active, uniquement lors de l’appel de enable, disable et load.

1er onglet actif

$("#workflowTab").tabs({ active: 0 });

Dernier onglet actif

$("#workflowTab").tabs({ active: -1 });

2ème onglet actif

$("#workflowTab").tabs({ active: 1 });

Son travail comme un tableau

Aucune de ces réponses n’a fonctionné pour moi. Je viens de contourner le problème. J’ai fait ça:

 $('#tabs-tab1').removeClass('tabs-hide'); $('#tabs-tab2').addClass('tabs-hide'); $('#container-tabs a[href="#tabs-tab2"]').parent().removeClass('tabs-selected'); $('#container-tabs a[href="#tabs-tab1"]').parent().addClass('tabs-selected'); 

Cela fonctionne très bien.

   var index = $("#tabs div").index($("#tabs-1" )); $("#tabs").tabs("select", index); $("#tabs-1")[0].classList.remove("ui-tabs-hide"); 

Conformément au document UI:

  1. Obtenez d’abord l’index de l’onglet que vous souhaitez activer.

     var index = $('#tabs a[href="'+id+'"]').parent().index(); 
  2. L’activer

     tabs.tabs( "option", "active", index ); 

Sur la base de la réponse de @stankovski, une manière plus précise de le faire qui fonctionnera dans tous les cas d’utilisation (par exemple, lorsqu’un onglet est chargé via ajax et que l’atsortingbut href de l’ancre ne correspond pas au hachage), cas correspondra à l’atsortingbut “aria-controls” de l’élément li. Donc, par exemple, si vous essayez d’activer un onglet basé sur location.hash, qui est défini sur l’identifiant de l’onglet, il est préférable de rechercher “aria-controls” que pour “href”.

Avec l’interface utilisateur jQuery> = 1.9:

 var index = $('#tabs > ul > li[aria-controls="simple-tab-2"]').parent().index(); $("#tabs").tabs("option", "active", index); 

Dans le cas de la configuration et de la vérification du hachage d’URL:

Lors de la création des tabs, utilisez l’événement ‘activate’ pour définir le fichier location.hash sur l’ID du panneau:

 $('#tabs').tabs({ activate: function(event, ui) { var scrollTop = $(window).scrollTop(); // save current scroll position window.location.hash = ui.newPanel.attr('id'); $(window).scrollTop(scrollTop); // keep scroll at current position } }); 

Ensuite, utilisez l’événement hashchange de la fenêtre pour comparer le fichier location.hash à l’ID du panneau (pour cela, recherchez l’atsortingbut aria-controls de l’élément li):

 $(window).on('hashchange', function () { if (!location.hash) { $('#tabs').tabs('option', 'active', 0); return; } $('#tabs > ul > li').each(function (index, li) { if ('#' + $(li).attr('aria-controls') == location.hash) { $('#tabs').tabs('option', 'active', index); return; } }); }); 

Cela va gérer tous les cas, même si les tabs utilisent ajax. De plus, si vous avez des tabs nesteds, il n’est pas trop difficile de gérer cela avec un peu plus de logique.

J’ai trouvé que cela fonctionne plus facilement que d’obtenir un index. Pour mes besoins, je sélectionne un onglet basé sur un hachage d’URL

 var target = window.location.hash.replace(/#/,'#tab-'); if (target) { jQuery('a[href='+target+']').click().parent().sortinggger('keydown'); } 

C’est la réponse

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

Je suppose que vous avez vraiment une mise en page comme:

 
  • one
  • two

Si cette hypothèse est correcte, vous utilisez simplement l’ID pour sélectionner “l’onglet”

 $('#tabone').css("display","none"); 

EDIT: sélectionnez l’onglet sur votre mise en page:

 var index = $('.tabs ul').index($('#tabone')); $('.tabs ul').tabs('select', index); 

Je l’ai fait comme ça

 if (document.location.hash != '') { //get the index from URL hash var tabSelect = document.location.hash.substr(1, document.location.hash.length); console.log("tabSelect: " + tabSelect); if (tabSelect == 'discount') { var index = $('#myTab a[href="#discount"]').parent().index(); $("#tabs").tabs("option", "active", index); $($('#myTab a[href="#discount"]')).tab('show'); } } 

$ (“# tabs”). tabs ({actif: [0,2], désactivé: [3], sélectionné: 2}); Où Sélectionné est utilisé pour ouvrir Onglet Particulier ou Sélectionner Onglet Particulier lors du chargement.