jquery - modal - get active tab bootstrap

Buscar pestaña activa usando jQuery y Twitter Bootstrap

Question

He estado trabajando en mi cerebro por un tiempo, y me gustaría saber si alguien sabe cómo puedo encontrar la pestaña activa, usando jQuery y Twitter Bootstrap. Extraer el hash de la URL no es mi primera opción, estoy usando el atributo de data-toggle en el enlace <a> por lo que no es necesario generar un hash URL.

¿Alguna idea? Aquí hay un ejemplo de mi marcado:

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

Estoy abierto a cualquier sugerencia: utilizar una sesión PHP, una cookie JS, etc.

Editar: este es el verdadero problema. Tengo un sistema de paginación que usa PHP, así que cuando se hace clic en un número de página o flecha siguiente / anterior, se volverá a cargar la página. Es por eso que necesito encontrar la pestaña activa antes de cargar la página siguiente, ya que solo la pasaré en la url o sesión, etc.

Answer 1

En primer lugar, debe eliminar el atributo de alternancia de datos . Utilizaremos algunos JQuery, así que asegúrese de incluirlos.

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

Answer 2

Twitter Bootstrap asigna la clase active al elemento li que representa la pestaña activa:

$("ul#sampleTabs li.active")

Una alternativa es vincular el evento shown de cada pestaña y guardar la pestaña activa:

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

Answer 3

aquí la respuesta para aquellos de ustedes que necesitan la solución Boostarp 3.

En bootstrap 3 use ''shown.bs.tab'' en lugar de ''shown'' en la siguiente línea

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