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:
Obtenez d’abord l’index de l’onglet que vous souhaitez activer.
var index = $('#tabs a[href="'+id+'"]').parent().index();
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.