Trouver l'Onglet Actif à l'aide de jQuery et Twitter Bootstrap

J'ai cassé mon cerveau pendant un petit moment maintenant, et je voudrais savoir si quelqu'un sait comment je peux trouver l'onglet actif, à l'aide de jQuery et de Twitter Bootstrap. Tirant le hash de l'URL n'est pas ma première option, je suis en utilisant le data-toggle attribut dans la <a> lien donc il n'est pas nécessaire de produire une URL de hachage.

Toute idée? Voici un exemple de balisage:

<ul class="nav nav-list" id="sampleTabs">
    <li><a href="#example" data-toggle="tab">Tab 1</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade active in" id="example">
        Example Tab
    </div>
</div>

<script>
$('#sampleTabs a:first').tab('show');
</script>

Je suis ouvert à toute suggestion - à l'aide d'une session PHP, JS cookie, etc.

Edit: C'est la vraie question. J'ai un système de pagination en PHP, donc quand un numéro de page ou suivant/précédent flèche est cliqué, il rechargera la page. C'est pourquoi j'ai besoin de trouver l'onglet actif avant le chargement de la page suivante, depuis, je vais juste le faire passer dans l'url ou de la session, etc.

InformationsquelleAutor William Orazi | 2012-08-20
  1. 97

    Twitter Bootstrap attribue le active classe à la li élément qui représente l'onglet actif:

    $("ul#sampleTabs li.active")

    Une alternative consiste à lier le shown cas de chaque onglet, et économiser de l'onglet actif:

    var activeTab = null;
$('a[data-toggle="tab"]').on('shown', function (e) {
  activeTab = e.target;
})
    • Vrai, mais je ne suis pas en utilisant leur standard de l'onglet de navigation. J'ai des liens dans une barre de menu qui ne sont pas automatiquement attribuer la active classe.
    • Ne pouvez-vous pas utiliser le shown cas de tab() et vérifier e.target?
    • Ah ha! Merci monsieur, c'est exactement ce dont j'avais besoin, je dois avoir manqué que dans les docs.
    • Tu es la bienvenue, content d'avoir pu aider, je l'ai utilisé avant, de sorte que rétréci vers le bas à la recherche un peu. 🙂
    • Il semble Bootstrap 3 est à l'aide de " montrée.bs.l'onglet' $('a[data-toggle="tab"]').sur('montré.bs.l'onglet', function (e) { ... }); getbootstrap.com/javascript/#tabs
    InformationsquelleAutor João Silva
  2. 24

    Ici est la réponse pour ceux d'entre vous qui ont besoin d'un Bootstrap 3 solution.

    Dans le bootstrap 3 utilisation montrés.bs.onglet' au lieu de 'montré' dans la ligne suivante

    //tab
$('#rowTab a:first').tab('show');

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//show selected tab /active
 console.log ( $(e.target).attr('id') );
});
    InformationsquelleAutor danielad
  3. 3

    Tout d'abord, vous devez enlever la data-toggle attribut. Nous allons utiliser quelques JQuery, donc assurez-vous d'inclure.

      <ul class='nav nav-tabs'>
    <li class='active'><a href='#home'>Home</a></li>
    <li><a href='#menu1'>Menu 1</a></li>
    <li><a href='#menu2'>Menu 2</a></li>
    <li><a href='#menu3'>Menu 3</a></li>
  </ul>

  <div class='tab-content'>
    <div id='home' class='tab-pane fade in active'>
      <h3>HOME</h3>
    <div id='menu1' class='tab-pane fade'>
      <h3>Menu 1</h3>
    </div>
    <div id='menu2' class='tab-pane fade'>
      <h3>Menu 2</h3>
    </div>
    <div id='menu3' class='tab-pane fade'>
      <h3>Menu 3</h3>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
//Handling data-toggle manually
    $('.nav-tabs a').click(function(){
        $(this).tab('show');
    });
//The on tab shown event
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        alert('Hello from the other siiiiiide!');
        var current_tab = e.target;
        var previous_tab = e.relatedTarget;
    });
});
</script>
    InformationsquelleAutor Abdelrahman Aly