Zdarzenie jquery Bootstrap 3 dla aktywnej zmiany zakładki

286

Spędziłem nierealistyczną ilość czasu próbując uruchomić funkcję, gdy zmiany tabulatorów w zakładce / pasku nawigacyjnym bootstrap 3 i dosłownie wszystkie sugestie wyrzucone przez Google były nieprawidłowe / nie działały.

Jak sobie z tym poradzić?

Meta-edycja: patrz komentarz

Gerben Rampaart
źródło
3
To było naprawdę przydatne! Jeśli chcemy uważać tylko na określoną kartę, możemy obserwować $ („a [href = '# tab_name']”). On ('pokazano.bs.tab', fn) Oczywiście możemy określić dalsze selektory, jeśli [href = '# tab_name'] nie ma gwarancji, że będzie unikalny.
msanjay
Możliwy duplikat Twittera Bootstrap - Wykonaj akcję na zakładce „pokazane”
rogerdpack 24.04.17.04
@rogerdpack „ stackoverflow.com/questions/13164239/... ” wydaje się mylące, aby przekierować do, pytający podjął niewłaściwą ścieżkę i szukał odpowiedzi w swoim zakresie, pytanie jest zbyt długie i szczegółowe, a zaakceptowana odpowiedź wydaje się to odzwierciedlać, ponieważ z pewnością nie jest to prawidłowa odpowiedź na moje pytanie. Fakt, że pytanie to nie pomogło, ponieważ wiele osób prawdopodobnie jest z tym związane.
Gerben Rampaart

Odpowiedzi:

451

Eric Saupe wie, jak to zrobić

$('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
źródło
Wielkie dzięki, spędziłem nad tym trochę czasu, zanim znalazłem odpowiedź, jesteś szalony!
Hajjat,
1
Jeśli musisz użyć zdarzenia zmiany (niezależnie od akcji z linku), po prostu użyj$(document).on('shown.bs.tab', function (e) { console.log('ae'); });
Aline Matos
Doskonale, dzięki temu zaoszczędziłem dużo czasu!
Justin,
Mam w tym małe wątpliwości. Zadeklarowałem targetjako zmienną globalną i przypisałem wartość, jak wspomniano powyżej. Kiedy ładuję stronę po raz pierwszy, otrzymuję wartość (alert) celu jako niezdefiniowaną. Ale kiedy zmieniam zakładkę i przypisuję tę wartość do celu, nie otrzymuję żadnego ostrzeżenia. Nawet komunikat o błędzie. Co powinienem zrobić, aby wyjść poza tę pętlę? Zadeklarowałem zmienną poza funkcją document.ready.
SSS
Działa to tylko wtedy, gdy kliknę inną kartę. Jak dodać ten wyzwalacz do domyślnej karty? Muszę załadować ajax na każdej karcie. Ale z tym ładuje się tylko wtedy, gdy kliknę inną kartę, a następnie pierwszą ponownie.
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');
    }
});

Problem polega na tym, że attr („href”) nigdy nie jest pusty.

Lub, aby porównać #id = "# jakąś wartość", a następnie wywołać ajax.

Florin
źródło
Tak, to tylko attr ('href') nigdy nie jest pracowity. Zwraca identyfikator karty.
Florin,
1
Rozumiem. Myślę, że mój komentarz do wszystkich skupił się na bicie „pokazano.bs.tab”. Bardzo ciężko mi było to wyśledzić.
Gerben Rampaart,
1
Okok ... dodano: pusty selektor.
Gerben Rampaart,
Dzięki. Jak urok!
dani herrera
Dziękuję @Florin. mój problem został rozwiązany dzięki twojej funkcji. LUBIĆ!
Aiyoub Amini,
32

Dzięki postowi @ Gerbena dowiedziałem się, że istnieją dwa zdarzenia show.bs.tab (przed wyświetleniem karty) i pokazano.bs.tab (po wyświetleniu karty), jak wyjaśniono w dokumentacji - użycie karty Bootstrap

Dodatkowym rozwiązaniem, jeśli interesuje nas tylko konkretna karta i być może dodamy osobne funkcje bez konieczności dodawania bloku if - else w jednej funkcji, jest użycie selektora href (być może wraz z dodatkowymi selektorami w razie potrzeby)

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

próbny

msanjay
źródło
Świetne rozwiązanie, muszę złapać zdarzenie po pokazie karty i zadzwonić do mojej funkcji kątowej, to rozwiązanie pozwoliło mi zaoszczędzić kilka godzin!
Allen
10

Aby dodać do odpowiedzi Mosh Feu, jeśli zakładki były tworzone w locie, jak w moim przypadku, użyłbyś następującego kodu

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

});

Mam nadzieję, że to komuś pomoże

Jaylen
źródło
8

To zadziałało dla mnie.

$('.nav-pills > li > a').click( function() {
    $('.nav-pills > li.active').removeClass('active');
    $(this).parent().addClass('active');
} );
Patrick D. Rittenhouse
źródło
Działa dla mnie idealnie.
MattD
1
Ta hi-jacks bootstraps domyślna funkcjonalność zakładki. Jeśli musisz to zrobić, karty nie inicjują się.
Archonic
2
Jest to „hacky” sposób i należy go unikać.
Juni Brosas
2

Używam innego podejścia.

Wystarczy spróbować znaleźć wszystkie atam gdzie idrozpoczyna się od jakiegoś fragmentu .

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>
Deweloper
źródło