Finden Sie Active Tab mit jQuery und Twitter Bootstrap

Ich habe mir jetzt schon eine Weile den Kopf zerbrochen und würde gerne wissen, ob jemand da draußen weiß, wie ich den aktiven Tab finden kann, indem ich jQuery und Bootstrap von Twitter verwende. Das Abrufen des Hashs aus der URL ist nicht meine erste Option, ich verwende die data-toggle Attribut in der <a> Link, sodass kein URL-Hash erstellt werden muss.

Irgendeine Einsicht? Hier ist ein Beispiel für mein Markup:

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

Ich bin offen für jeden Vorschlag – mit einer PHP-Sitzung, einem JS-Cookie usw.

Edit: Das ist das eigentliche Problem. Ich habe ein Paginierungssystem, das PHP verwendet. Wenn also auf eine Seitenzahl oder einen Weiter-/Zurück-Pfeil geklickt wird, wird die Seite neu geladen. Aus diesem Grund muss ich die aktive Registerkarte finden, bevor ich die nächste Seite lade, da ich sie einfach in der URL oder Sitzung usw. übergebe.

Twitter Bootstrap weist die active Klasse zum li Element, das die aktive Registerkarte darstellt:

$("ul#sampleTabs li.active")

Eine Alternative ist die Bindung shown Ereignis jeder Registerkarte und speichern Sie die aktive Registerkarte:

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

Hier ist die Antwort für diejenigen unter Ihnen, die eine Boostrap 3-Lösung benötigen.

Verwenden Sie in Bootstrap 3 in der nächsten Zeile ‘shown.bs.tab’ anstelle von ‘shown’

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

Zuerst müssen Sie die entfernen Datenumschaltung Attribut. Wir werden etwas JQuery verwenden, stellen Sie also sicher, dass Sie es einschließen.

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