Événement jquery Bootstrap 3 pour le changement d'onglet actif


286

J'ai passé un temps irréaliste à essayer de déclencher une fonction lorsque les modifications de l'onglet de l'onglet / de la barre de navigation de bootstrap 3 et littéralement toutes les suggestions que Google a crachées étaient fausses / n'ont pas fonctionné.

Que faire à ce propos?

Meta-edit: voir le commentaire


3
C'était vraiment utile! Si nous voulons faire attention uniquement à un onglet spécifique, nous pouvons surveiller $ ("a [href = '# tab_name']"). On ('shown.bs.tab', fn) Bien sûr, nous pouvons spécifier d'autres sélecteurs si un [href = '# tab_name'] n'est pas garanti d'être unique.
msanjay


@rogerdpack ' stackoverflow.com/questions/13164239/… ' semble déroutant pour rediriger vers, son questionneur a pris un mauvais chemin et a cherché une réponse dans son champ d'application, la question est trop longue et spécifique et la réponse acceptée semble refléter cela parce que ce n'est certainement pas la bonne réponse à ma question. Le fait que cette question n'a pas aidé car beaucoup de gens est probablement lié à cela.
Gerben Rampaart

Réponses:


451

Eric Saupe sait comment le faire

$('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>


Merci beaucoup, j'ai passé pas mal de temps là-dessus avant de trouver votre réponse, vous basculez!
Hajjat

1
Si vous devez utiliser l'événement change (quelle que soit l'action du lien), utilisez simplement$(document).on('shown.bs.tab', function (e) { console.log('ae'); });
Aline Matos

Parfait, ça m'a fait gagner beaucoup de temps avec ça!
Justin

J'ai un petit doute là-dessus. J'ai déclaré le targetcomme une variable globale et affecté la valeur comme mentionné ci-dessus. Lorsque je charge la page pour la première fois, j'obtiens la valeur (alerte) de la cible non définie. Mais, lorsque je modifie l'onglet et attribue cette valeur à la cible, je ne reçois aucune alerte. Pas même un message d'erreur. Que dois-je faire pour le sortir de cette boucle? J'ai déclaré la variable en dehors de la fonction document.ready.
SSS

Cela ne fonctionne que si je clique sur un autre onglet. Comment ajouter ce déclencheur pour l'onglet par défaut? J'ai besoin de charger ajax sur chaque onglet. Mais avec cela, il ne se charge que lorsque je clique sur un autre onglet, puis sur le premier à nouveau.
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');
    }
});

le problème est que attr ('href') n'est jamais vide.

Ou pour comparer la valeur #id = "#some value", puis appelez ajax.


Oui, c'est juste attr ('href') n'est jamais emplty. Il retourne l'identifiant de l'onglet.
Florin

1
Je comprends. Je pense que mon commentaire à tout le monde s'est concentré sur le bit 'shown.bs.tab'. J'ai eu beaucoup de mal à retrouver cela.
Gerben Rampaart

1
Okok ... ajouté: sélecteur vide.
Gerben Rampaart

Merci. Comme un charme!
dani herrera

Merci @Florin. mon problème est résolu avec votre fonction. COMME!
Aiyoub Amini,

32

Grâce au message de @ Gerben, j'ai appris qu'il y avait deux événements show.bs.tab (avant que l'onglet ne soit affiché) et shown.bs.tab (après que l'onglet soit affiché) comme expliqué dans la documentation - Utilisation de l' onglet Bootstrap

Une solution supplémentaire si nous ne sommes intéressés que par un onglet spécifique, et peut-être ajouter des fonctions distinctes sans avoir à ajouter un bloc if - else dans une fonction, consiste à utiliser le sélecteur a href (peut-être avec des sélecteurs supplémentaires si nécessaire)

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

démo


Excellente solution, j'ai besoin d'attraper après l'événement de tabulation et d'appeler ma fonction angulaire, cette solution m'a fait gagner quelques heures!
Allen

10

Pour ajouter à la réponse Mosh Feu, si les onglets étaient créés à la volée comme dans mon cas, vous utiliseriez le code suivant

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

});

J'espère que ça aidera quelqu'un


8

Cela a fonctionné pour moi.

$('.nav-pills > li > a').click( function() {
    $('.nav-pills > li.active').removeClass('active');
    $(this).parent().addClass('active');
} );

Fonctionne parfaitement pour moi.
MattD

1
Cette fonctionnalité par défaut de l'onglet Hi-Jacks Bootstraps. Si vous devez le faire, vos onglets ne s'initialisent pas.
Archonic

2
Il s'agit d'une méthode «hacky» et doit être évitée.
Juni Brosas

2

J'utilise une autre approche.

Essayez simplement de trouver aidcommence une sous-chaîne .

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.