web-dev-qa-db-fra.com

Trouver un onglet actif en utilisant jQuery et Twitter Bootstrap

Je me suis creusé la tête depuis un petit moment maintenant, et j'aimerais savoir si quelqu'un sait comment je peux trouver l'onglet actif, en utilisant jQuery et le logiciel Bootstrap de Twitter. Extraire le hachage de l'URL n'est pas ma première option, j'utilise le data-toggle attribut dans le <a> lien afin qu'il n'y ait pas besoin de produire un hachage URL.

Une idée? Voici un exemple de mon 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 - utiliser une session PHP, un cookie JS, etc.).

Edit: C'est le vrai problème. J'ai un système de pagination utilisant PHP. Ainsi, lorsqu'un clic sur le numéro de page ou la flèche next/prev est cliqué, la page sera rechargée. C’est la raison pour laquelle je dois trouver l’onglet actif avant de charger la page suivante, car je ne ferai que le passer dans l’URL ou la session, etc.

jquerytabstwitter-bootstrap
56
William Orazi

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

$("ul#sampleTabs li.active")

Une alternative consiste à lier l'événement shown de chaque onglet et à enregistrer l'onglet actif:

var activeTab = null;
$('a[data-toggle="tab"]').on('shown', function (e) {
  activeTab = e.target;
})
97
João Silva

Voici la réponse pour ceux d’entre vous qui ont besoin d’une solution Bootstrap 3.

Dans bootstrap 3, utilisez 'shown.bs.tab' au lieu de 'shown' à 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') );
});
26
danielad

Tout d'abord, vous devez supprimer l'attribut data-toggle. Nous allons utiliser JQuery, alors assurez-vous de l'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>
4
Abdelrahman Aly