7
votes

ID d'onglet sélectionné?

J'ai le script suivant qui obtient l'index de l'onglet sélectionné:

est-il possible d'obtenir l'identifiant à la place, si le LI a eu des identités. S'il est plus facile de l'obtenir d'ailleurs, cela irait aussi bien, c'est-à-dire les balises de div liées, ou ailleurs.

jquery jquery-ui jquery-ui-tabs

1 commentaires

Je ne suis pas d'accord, l'affichage des liens vers Jsfiddle permet aux utilisateurs de modifier rapidement et facilement le script, sans avoir à le recréer sur leur propre ordinateur qui prendrait plus de temps à la personne qui tente d'aider.

5 Réponses :

4
votes

var id = $("li.tab:eq("+selected+")").attr('id');

0 commentaires

8
votes

jQuery ui ajoute simplement une classe à la LI sélectionnée. Vous pouvez simplement tirer le LI avec la classe sélectionnée comme ceci: xxx pré>

Si vous vouliez obtenir l'un des onglets non sélectionnés, vous pouvez faire quelque chose comme ceci: P>

var id = $("li.tab:not(.ui-tabs-selected)").first().attr("id");

3 commentaires

Votre démo ne semble pas fonctionner. Il semble de retourner l'index.

Je préfère la solution d'Eugene ci-dessous car, bien qu'elle soit techniquement moins efficace, elle ne dépend pas du comportement par défaut de JQuery et il montre l'utilisateur comment il / elle peut obtenir l'identifiant d'un onglet non sélectionné pour une situation différente et future.

Mise à jour My Jsfiddle Link, incluait également un moyen d'obtenir un onglet «non sélectionné» au cas où c'est une préoccupation.

3
votes

Si vous êtes capable d'utiliser simplement le gestionnaire d'événements de l'ongled Control, cela fonctionne bien: xxx

aussi, voici Référence pratique pour les différents UI Propriétés de l'objet.

0 commentaires

0
votes

Si vous venez ici via Google comme moi-même et utilisez jQuery ui 1.9.x, utilisez l'activate code> ou ou Beforeactivate code> événements pour obtenir le ID Code>:

$('selector').tabs({
  activate: function(e, ui) {
    var id = $(ui.newPanel).prop('id');
  }
});

0 commentaires

2
votes

Si vous utilisez JQuery Tabs (nouvelle version):

<div id="tabs">
        <ul>
            <li data-value="tab1"><a href="#tab1">Name of tab1</a></li>
            <li data-value="tab2"><a href="#tab2">Name of tab2</a></li>
        </ul>
        <div id="tab1">
        </div>
        <div id="tab2">
        </div>
 </div>       

 //get id in init
 $(function () {
    $("#tabs").tabs({
        activate: function(event ,ui) {
           var id = $(ui.newPanel).prop('id');
        }
      }
    );
 });
 var id = $("#tabs li.ui-state-active").attr('data-value'); //get id in other function

0 commentaires