Les onglets de jQuery UI. Comment sélectionner un onglet en fonction de son id et non en fonction de son index ?

Question

J'ai deux onglets et je les ai configurés en utilisant jQuery UI.

ul  class="tabs"
  li  tabone
  li tabtwo
ul

dynamiquement à partir du code C#, je vais cacher ou sélectionner un onglet, disons l'onglet 2. et l'autre onglet doit être caché ou non affiché. Je peux le faire en JavaScript en utilisant .tabs({selected:1}); et .tabs(disable:0). mais je ne veux pas utiliser les indices de tabulation pour le faire.

Existe-t-il une alternative pour sélectionner les onglets en fonction de leur nom/identifiant ?

Answer 1

La réponse acceptée n'a pas fonctionné pour moi non plus, mais j'ai trouvé une solution dans un fil similaire : Passer à l'onglet sélectionné par son nom dans les onglets de Jquery-UI

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

Avec jQuery UI >= 1.9 :

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

Answer 2

Remarque : en raison des modifications apportées à jQuery 1.9 et à jQuery UI, cette réponse n'est plus la bonne. Veuillez consulter la réponse de @stankovski ci-dessous.

Vous devez d'abord trouver l'index de l'onglet (qui est simplement sa position dans une liste), puis sélectionner spécifiquement l'onglet à l'aide de l'événement select fourni par jQuery UI ( onglets->sélection ).

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

Mise à jour : BTW - Je suis conscient qu'il s'agit (en fin de compte) d'une sélection par index. Mais, il n'est pas nécessaire de connaître la position spécifique des onglets (en particulier lorsqu'ils sont générés dynamiquement comme demandé dans la question).

Answer 3

D'après le document le plus récent, le sélectionnez prend un index ou l'id du panneau de l'onglet (la valeur de hachage). La documentation indique :

Sélectionnez un onglet, comme s'il était cliqué. Le second argument est l'indice l'index basé sur zéro de l'onglet à sélectionner ou le sélecteur id du panneau auquel l'onglet est associé. panneau auquel l'onglet est associé (l'identificateur de fragment href de l'onglet, par exemple hash, pointe vers l'id du panneau).

Ainsi, avec une mise en page comme

<div id="myTabs">    
    <ul  class="tabs">
      <li><a href="#tabone">tabone</a></li>
      <li><a href="#tabtwo">tabtwo</a></li>
    </ul>   
</div>

les travaux suivants

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

Voici un exemple .

UPDATE

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

Answer 4

Cela peut avoir des effets secondaires s'il y a d'autres écouteurs, et ce n'est pas aussi agréable que d'interagir à travers l'API des plugins -- mais cela donne un code moins verbeux si on "clique" simplement sur l'onglet, plutôt que de compter son index et de l'activer ensuite, et c'est assez intuitif ce qui se passe. De plus, cela n'échouera pas si les ui-guys décident de renommer l'option à nouveau.

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

Il est cependant intriguant de constater que le code des onglets de l'interface utilisateur possède une métafonction ( _getIndex ) avec le commentaire :

"meta-fonction pour donner aux utilisateurs l'option de fournir une chaîne de href au lieu de d'un indice numérique"

mais ne l'utilise pas lors de la définition de l'option active, seulement lors des appels enable, disable et load.

Answer 5

                <div id="tabs" style="width: 290px">
                    <ul >
                        <li><a id="myTab1" href="#tabs-1" style="color: Green">Báo cáo chuan</a></li>
                        <li><a id="myTab2" href="#tabs-2" style="color: Green">Báo cáo mo rong</a></li>
                    </ul>
                    <div id="tabs-1" style="overflow-x: auto">
                        <ul class="nav">

                            <li><a href="@Url.Content("~/Report/ReportDate")"><span class=""></span>Báo cáo theo ngày</a></li>

                        </ul>
                    </div>
                    <div id="tabs-2" style="overflow-x: auto; height: 290px">
                        <ul class="nav">

                            <li><a href="@Url.Content("~/Report/PetrolReport#tabs-2")"><span class=""></span>Báo cáo nhiên lieu</a></li>
                        </ul>
                    </div>
                </div>

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