I've been racking my brain for a little while now, and I would like to know if anyone out there knows how I can find the active tab, using jQuery and Twitter's Bootstrap. Pulling the hash from the URL is not my first option, I'm using the data-toggle
attribute in the <a>
link so there is no need to produce a URL hash.
Any insight? Here's an example of my markup:
<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>
I'm open to any suggestion - using a PHP session, JS cookie, etc.
Edit: This is the real issue. I have a pagination system using PHP, so when a page number or next/prev arrow is clicked, it will reload the page. This is why I need to find the active tab before loading the next page, since I"ll just pass it in the url or session, etc.
Twitter Bootstrap assigns the active
class to the li
element that represents the active tab:
$("ul#sampleTabs li.active")
An alternative is to bind the shown
event of each tab, and save the active tab:
var activeTab = null;
$('a[data-toggle="tab"]').on('shown', function (e) {
activeTab = e.target;
})