Find Active Tab using jQuery and Twitter Bootstrap

Question

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.

João Silva · Accepted Answer · 2012-08-20T15:58:23.737

115

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

edited Aug 20 '12 at 15:58

answered Aug 20 '12 at 15:45

João Silva

89,303
29
152
158

1

True, but I'm not using their standard tab navigation. I have links in a sidebar that don't automatically assign the `active` class. – William Orazi Aug 20 '12 at 15:48
2

@pennstate_fanboy: Can't you use the `shown` event of `tab()` and check `e.target`? – João Silva Aug 20 '12 at 15:54
Ah ha! Thank you sir, that's exactly what I needed, I must have missed that in the docs. – William Orazi Aug 20 '12 at 15:59
2

@pennstate_fanboy: You're welcome, glad I could help, I've used it before, so that narrowed down the search a bit. :) – João Silva Aug 20 '12 at 16:00
6

It seems Bootstrap 3 is using 'shown.bs.tab' $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { ... }); http://getbootstrap.com/javascript/#tabs – ken Apr 22 '14 at 14:06

score 35 · Answer 2 · edited Nov 12 '18 at 18:58

35

Here is the answer for those of you who need a Boostrap 3 solution.

In bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line

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

edited Nov 12 '18 at 18:58

CaptainBli

4,121
4
39
58

answered Mar 24 '15 at 07:09

Develop4Life

7,581
8
58
76

Matrix · Answer 3 · 2017-05-03T07:09:58.963

First of all you need to remove the data-toggle attribute. We will use some JQuery, so make sure you include it.

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

Find Active Tab using jQuery and Twitter Bootstrap

3 Answers3

Linked