Bootstrap 3-Abfrageereignis für aktiven Tab-Wechsel

286

Ich habe unrealistisch viel Zeit damit verbracht, eine Funktion auszulösen, als die Registerkarten der Registerkarte / Navigationsleiste von Bootstrap 3 geändert wurden und buchstäblich alle Vorschläge, die Google ausgespuckt hat, falsch waren / nicht funktionierten.

Wie gehe ich vor?

Meta-Edit: siehe Kommentar

Gerben Rampaart
quelle
3
Das war wirklich nützlich! Wenn wir nur auf eine bestimmte Registerkarte achten möchten, können wir auf $ ("a [href = '# tab_name']") achten. On ('selected.bs.tab', fn) Natürlich können wir weitere Selektoren angeben, wenn Ein [href = '# tab_name'] ist garantiert nicht eindeutig.
Msanjay
@rogerdpack ' stackoverflow.com/questions/13164239/… ' scheint verwirrend zu sein, der Fragesteller hat einen falschen Weg eingeschlagen und nach einer Antwort in seinem Umfang gesucht, die Frage ist zu lang und spezifisch und die akzeptierte Antwort scheint dies zu widerspiegeln, weil es ist sicherlich nicht die gültige Antwort auf meine Frage. Die Tatsache, dass diese Frage nicht so vielen Menschen geholfen hat, hängt wahrscheinlich damit zusammen.
Gerben Rampaart

Antworten:

451

Eric Saupe weiß, wie es geht

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    home tab!
  </div>
  <div class="tab-pane fade" id="profile">
    profile tab!
  </div>
</div>

Gerben Rampaart
quelle
Vielen Dank, ich habe einige Zeit damit verbracht, bevor ich deine Antwort gefunden habe, du rockst!
Hajjat
1
Wenn Sie das Änderungsereignis verwenden müssen (unabhängig von der Aktion aus dem Link), verwenden Sie einfach$(document).on('shown.bs.tab', function (e) { console.log('ae'); });
Aline Matos
Perfekt, hat mir viel Zeit gespart!
Justin
Ich habe einen kleinen Zweifel daran. Ich habe das targetals globale Variable deklariert und den Wert wie oben erwähnt zugewiesen. Wenn ich die Seite zum ersten Mal lade, erhalte ich den Wert (Alarm) des Ziels als undefiniert. Wenn ich jedoch die Registerkarte ändere und diesen Wert dem Ziel zuweise, erhalte ich keine Warnung. Nicht einmal eine Fehlermeldung. Was soll ich tun, um es außerhalb dieser Schleife zu bringen? Ich habe die Variable außerhalb der Funktion document.ready deklariert.
SSS
Dies funktioniert nur, wenn ich auf eine andere Registerkarte klicke. Wie füge ich diesen Trigger für die Standardregisterkarte hinzu? Ich muss Ajax auf jede Registerkarte laden. Aber damit wird es nur geladen, wenn ich auf eine andere Registerkarte klicke und dann wieder auf die erste.
Kārlis Janisels
89
$(function () {
    $('#myTab a:last').tab('show');
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href");
    if ((target == '#messages')) {
        alert('ok');
    } else {
        alert('not ok');
    }
});

Das Problem ist, dass attr ('href') niemals leer ist.

Oder um den #id = "#some value" zu vergleichen und dann den Ajax aufzurufen.

Gulden
quelle
Ja ist nur attr ('href') ist nie leer. Es gibt die ID der Registerkarte zurück.
Florin
1
Ich verstehe. Ich denke, mein Kommentar an alle konzentrierte sich auf das Bit 'selected.bs.tab'. Es fiel mir wirklich schwer, das aufzuspüren.
Gerben Rampaart
1
Okok ... hinzugefügt: leerer Selektor.
Gerben Rampaart
Vielen Dank. Wie ein Zauber!
Dani Herrera
Danke @Florin. Mein Problem ist mit Ihrer Funktion gelöst. MÖGEN!
Aiyoub Amini
32

Dank @ Gerbens Beitrag wurde bekannt, dass es zwei Ereignisse gibt: show.bs.tab (bevor die Registerkarte angezeigt wird) und show.bs.tab (nachdem die Registerkarte angezeigt wird), wie in den Dokumenten erläutert - Verwendung der Registerkarte " Bootstrap"

Eine zusätzliche Lösung, wenn wir nur an einer bestimmten Registerkarte interessiert sind und möglicherweise separate Funktionen hinzufügen möchten, ohne einen if-else-Block in einer Funktion hinzufügen zu müssen, ist die Verwendung des a href-Selektors (möglicherweise zusammen mit zusätzlichen Selektoren, falls erforderlich).

 $("a[href='#tab_target_id']").on('shown.bs.tab', function(e) {
      console.log('shown - after the tab has been shown');
 });

 // or even this one if we want the earlier event
 $("a[href='#tab_target_id']").on('show.bs.tab', function(e) {
      console.log('show - before the new tab has been shown');
 });

Demo

msanjay
quelle
Tolle Lösung, ich muss nach dem Tab-Show-Ereignis abfangen und meine Winkelfunktion aufrufen. Diese Lösung hat mir ein paar Stunden gespart!
Allen
10

Um die Antwort von Mosh Feu zu ergänzen, würden Sie den folgenden Code verwenden, wenn die Registerkarten wie in meinem Fall im laufenden Betrieb erstellt würden

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    var tab = $(e.target);
    var contentId = tab.attr("href");

    //This check if the tab is active
    if (tab.parent().hasClass('active')) {
         console.log('the tab with the content id ' + contentId + ' is visible');
    } else {
         console.log('the tab with the content id ' + contentId + ' is NOT visible');
    }

});

Ich hoffe das hilft jemandem

Jaylen
quelle
8

Das hat bei mir funktioniert.

$('.nav-pills > li > a').click( function() {
    $('.nav-pills > li.active').removeClass('active');
    $(this).parent().addClass('active');
} );
Patrick D Rittenhouse
quelle
Funktioniert perfekt für mich.
MattD
1
Diese Hi-Jacks-Bootstraps bieten die Standardfunktion für Registerkarten. Wenn Sie dies tun müssen, werden Ihre Registerkarten nicht initialisiert.
Archonic
2
Dies ist ein "hackiger" Weg und sollte vermieden werden.
Juni Brosas
2

Ich benutze einen anderen Ansatz.

Versuchen Sie einfach, alles zu finden, awo idvon einem Teilstring ausgeht .

JS

$('a[id^=v-photos-tab]').click(function () {
     alert("Handler for .click() called.");
});

HTML

<a class="nav-item nav-link active show"  id="v-photos-tab-3a623245-7dc7-4a22-90d0-62705ad0c62b" data-toggle="pill" href="#v-photos-3a623245-7dc7-4a22-90d0-62705ad0c62b" role="tab" aria-controls="v-requestbase-photos" aria-selected="true"><span>Cool photos</span></a>
Entwickler
quelle