Найти активную вкладку с помощью jQuery и Twitter Bootstrap

Я немного устал от своего мозга, и я хотел бы знать, знает ли кто-нибудь, как я могу найти активную вкладку, используя jQuery и Twitter Bootstrap. Вытягивание хэша из URL-адреса не является моим первым вариантом, я использую атрибут data-toggle в ссылке <a>, поэтому нет необходимости создавать хеш-URL.

Любое понимание? Вот пример моей разметки:

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

Я открыт для любого предложения - используя PHP-сессию, JS файл cookie и т.д.

Изменить: Это реальная проблема. У меня есть система разбиения на страницы с использованием PHP, поэтому, когда щелкнут номер страницы или следующая/предыдущая стрелка, она перезагрузит страницу. Вот почему мне нужно найти активную вкладку перед загрузкой следующей страницы, так как я просто отправлю ее в URL-адрес или сеанс и т.д.

Ответы

Ответ 1

Twitter Bootstrap назначает класс active элементу li, который представляет активную вкладку:

$("ul#sampleTabs li.active")

Альтернативой является привязка события shown каждой вкладки и сохранение активной вкладки:

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

Ответ 2

вот ответ для тех из вас, кто нуждается в решении Boostarp 3.

В bootstrap 3 используйте 'показанный .bs.tab' вместо 'показанного' в следующей строке

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

Ответ 3

Прежде всего вам нужно удалить атрибут data-toggle. Мы будем использовать некоторый JQuery, поэтому обязательно включите его.

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