Evento Bootstrap 3 jquery para cambio de pestaña activo


286

Pasé una cantidad de tiempo poco realista tratando de disparar una función cuando la pestaña cambia de la barra de navegación / pestaña bootstrap 3 y, literalmente, todas las sugerencias que Google escupió eran incorrectas / no funcionaron.

¿Como va esto?

Metaedición: ver comentario


3
¡Esto fue realmente útil! Si queremos ver solo una pestaña específica, podemos mirar por $ ("a [href = '# tab_name']"). On ('shown.bs.tab', fn) Por supuesto, podemos especificar más selectores si No se garantiza que a [href = '# tab_name'] sea único.
msanjay


@rogerdpack ' stackoverflow.com/questions/13164239/… ' parece confuso para redirigirlo, su interlocutor tomó un camino equivocado y buscó una respuesta dentro de su alcance, la pregunta es demasiado larga y específica y la respuesta aceptada parece reflejar eso porque ciertamente no es la respuesta válida a mi pregunta. El hecho de que esta pregunta no ayudó, ya que muchas personas probablemente está relacionado con eso.
Gerben Rampaart

Respuestas:


451

Eric Saupe sabe cómo hacerlo

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


Muchas gracias, pasé bastante tiempo en esto antes de encontrar su respuesta, ¡rockea!
Hajjat

1
Si tiene que usar el evento de cambio (independientemente de la acción del enlace), simplemente use$(document).on('shown.bs.tab', function (e) { console.log('ae'); });
Aline Matos

¡Perfecto, me ahorró mucho tiempo con esto!
Justin

Tengo una pequeña duda en esto. Declaré targetcomo una variable global y asigné el valor como se mencionó anteriormente. Cuando cargo la página por primera vez, obtengo el valor (alerta) del objetivo como indefinido. Pero, cuando cambio la pestaña y asigno ese valor al objetivo, no recibo ninguna alerta. Ni siquiera un mensaje de error. ¿Qué debo hacer para sacarlo de ese círculo? He declarado la variable fuera de la función document.ready.
SSS

Esto funciona solo si hago clic en otra pestaña. ¿Cómo agregar ese disparador para la pestaña predeterminada? Necesito cargar ajax en cada pestaña. Pero con esto se carga solo cuando hago clic en otra pestaña y luego en la primera nuevamente.
Kārlis Janisels el

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

El problema es que attr ('href') nunca está vacío.

O para comparar el #id = "#some value" y luego llamar al ajax.


Sí, solo attr ('href') nunca es vacío. Devuelve el id de la pestaña.
Florin

1
Entiendo. Creo que mi comentario a todos se centró en el bit 'shown.bs.tab'. Me costó mucho rastrear eso.
Gerben Rampaart

1
Okok ... agregado: selector vacío.
Gerben Rampaart

Gracias. ¡Como un encanto!
dani herrera

Gracias @Florin. mi problema está resuelto con tu función ¡ME GUSTA!
Aiyoub Amini

32

Gracias a la publicación de @ Gerben, descubrí que hay dos eventos show.bs.tab (antes de que se muestre la pestaña) y shown.bs.tab (después de que se muestra la pestaña) como se explica en los documentos: uso de la pestaña Bootstrap

Una solución adicional si solo estamos interesados ​​en una pestaña específica, y tal vez agregue funciones separadas sin tener que agregar un bloque if - else en una función, es usar un selector href (tal vez junto con selectores adicionales si es necesario)

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

manifestación


Gran solución, necesito atrapar después del evento de pestaña y llamar a mi función angular, ¡esta solución me ahorró un par de horas!
Allen

10

Para agregar a la respuesta de Mosh Feu, si las pestañas se crearon sobre la marcha como en mi caso, usaría el siguiente código

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

});

Espero que esto ayude a alguien


8

Esto funcionó para mí.

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

Funciona perfectamente para mi.
MattD

1
Esta hi-jacks arranca la funcionalidad de pestaña predeterminada. Si tiene que hacer esto, sus pestañas no se están inicializando.
Archonic

2
Esta es una forma 'hacky' y debe evitarse.
Juni Brosas

2

Yo uso otro enfoque.

Solo trata de encontrar todo adonde idcomience desde alguna subcadena .

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.