jQuery UI tabs. Comment sélectionner un onglet basé sur son id non basé sur l'index

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

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);

à partir du document le plus récent, la méthode select prend un index ou l'id du panneau de l'onglet (la valeur hash href). La documentation dit:

sélectionnez un onglet, comme s'il avait été cliqué. Le deuxième argument est le index à base zéro de l'onglet à sélectionner ou le sélecteur d'id du panneau de l'onglet est associé à l'onglet href identificateur de fragment, par exemple hachage, indique l'id du panneau).

ainsi, étant donné une disposition comme

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

œuvres

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

voici un exemple .

mise à JOUR

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

il peut avoir des effets secondaires s'il y a d'autres auditeurs, et il ne se sent pas aussi agréable que d'interagir à travers L'API plugins -- mais il donne un code moins verbeux si vous" cliquez " sur l'onglet, plutôt que de compter son index et de le mettre actif par la suite, et c'est assez intuitif ce qui se passe. De plus, il n'échouera pas si les gars de l'interface-utilisateur décident de renommer l'option à nouveau.

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

il est curieux, cependant, que le code des onglets ui a une méta-fonction ( _getIndex ) avec le commentaire:

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

mais ne l'utilise pas pour définir l'option active, seulement lors de l'appel enable, disable et load.

actif 1er onglet

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

dernier onglet actif

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

Active 2ème onglet

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

son travail comme un tableau

aucune de ces réponses n'a fonctionné pour moi. Je viens de contourné le problème. J'ai fait ceci:

$('#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');

ça marche très bien.

                <div id="tabs" style="width: 290px">
                    <ul >
                        <li><a id="myTab1" href="#tabs-1" style="color: Green">Báo cáo chuẩn</a></li>
                        <li><a id="myTab2" href="#tabs-2" style="color: Green">Báo cáo mở rộng</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 liệu</a></li>
                        </ul>
                    </div>
                </div>


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

selon UI Doc:

1. obtenez D'abord l'index de l'onglet que vous voulez activer.

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

2. Activer

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

en S'appuyant sur la réponse de @stankovski, une façon plus précise de le faire qui fonctionnera pour tous les cas d'utilisation (par exemple, quand un onglet est chargé via ajax et donc l'attribut HREF de l'ancre ne correspond pas avec le hachage), l'id dans tous les cas correspond avec l'attribut "aria-controls" de l'élément li. Par exemple, si vous essayez d'activer un onglet basé sur l'emplacement.de hachage, qui est à l'onglet id, alors il est préférable de rechercher pour "aria-controls" que pour "href".

avec jQuery UI > = 1,9:

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

en cas de paramétrage et de vérification du hachage d'url:

lors de la création des onglets, Utilisez l'événement 'activate' pour définir l'emplacement.hash à 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
  }    
});

puis utilisez l'événement hashchange fenêtre pour comparer l'emplacement.hachez l'id du panneau (faites ceci en recherchant l'attribut 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;
    }
  });


});

ça va s'occuper de tout cas, même lorsque les onglets utilisent ajax. En outre, si vous avez emboîté les onglets, il n'est pas trop difficile de gérer que l'un ou l'autre en utilisant un peu plus de logique.

j'ai trouvé cela fonctionne plus facilement que d'obtenir un indice. 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().trigger('keydown');      
}   

C'est la réponse

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

je fais une supposition sauvage que vous avez vraiment la disposition comme:

<ul  class="tabs">
  <li id="tabone">one</li>
  <li id="tabtwo">two</li>
</ul>

si cette hypothèse est correcte, vous utilisez simplement L'ID pour sélectionner" tab "

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

modifier: sélectionnez l'onglet sur votre mise en page:

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

j'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');
   }
}

$("#onglets").les onglets({active: [0,2], désactivée: [3],sélectionné: 2}); Où sélectionné est utilisé pour ouvrir L'onglet particulier ou sélectionner L'onglet particulier onload.