329

I spent an unrealistic amount of time trying to fire a function when the tab changes of the bootstrap 3 tab/navbar and literally all suggestions google spat out were wrong/did not work.

How to go about this?

Meta-edit: see comment

3
  • 4
    This was really useful! If we want to watch out only for a specific tab we can watch for $("a[href='#tab_name']").on('shown.bs.tab', fn) Of course we can specify further selectors if a[href='#tab_name'] isn't guaranteed to be unique.
    – msanjay
    Commented Oct 1, 2014 at 14:32
  • Possible duplicate of Twitter Bootstrap - Perform action on tab "shown" event
    – rogerdpack
    Commented Apr 24, 2017 at 13:57
  • @rogerdpack 'stackoverflow.com/questions/13164239/…' seems confusing to redirect to, it's questioner took a wrong path and looked for an answer within it's scope, the question is overly long and specific and the accepted answer seems to reflect that because it is certainly not the valid answer to my question. The fact this question did not help as many people probably is related to that. Commented Apr 24, 2017 at 14:59

8 Answers 8

510

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

11
  • 1
    Thanks a lot, spent quite some time on this before finding your answer, you rock!
    – Hajjat
    Commented Oct 13, 2015 at 5:42
  • 4
    If you have to use the change event (regardless of the action from the link), simply use$(document).on('shown.bs.tab', function (e) { console.log('ae'); }); Commented May 13, 2016 at 13:02
  • 1
    Perfect, saved me a lot of time with this!
    – Justin
    Commented Aug 12, 2016 at 18:20
  • I have a small doubt in this. I declared the target as a global variable and assigned the value as mentioned above. When I first load the page, I get the value(alert) of target as undefined. But, when I change the tab and assign that value to the target, I'm not getting any alert. Not even an error message. What should I do, in order to bring it outside that loop? I've declared the variable outside the document.ready function.
    – SSS
    Commented Nov 2, 2016 at 12:31
  • This works only if I click on another tab. How to add that trigger for default tab? I need to load ajax on every tab. But with this it loads only when I click another tab and then the first again. Commented Nov 3, 2016 at 12:31
97
$(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');
    }
});

the problem is that attr('href') is never empty.

Or to compare the #id = "#some value" and then call the ajax.

5
  • Yes is just attr('href') is never emplty. It return the id of the tab.
    – Florin
    Commented Dec 20, 2013 at 15:03
  • 1
    I understand. I think my comment to everyone focused on the 'shown.bs.tab' bit. I had a really hard time tracking that down. Commented Dec 20, 2013 at 15:05
  • 1
    Okok... added :empty selector. Commented Dec 20, 2013 at 15:09
  • Thank you @Florin. my problem is solved with your function. LIKE!
    – Aiyoub A.
    Commented May 25, 2017 at 6:11
  • Where is this documented?
    – smac89
    Commented Aug 17, 2017 at 22:09
41

Thanks to @Gerben's post came to know there are two events show.bs.tab (before the tab is shown) and shown.bs.tab (after the tab is shown) as explained in the docs - Bootstrap Tab usage

An additional solution if we're only interested in a specific tab, and maybe add separate functions without having to add an if - else block in one function, is to use the a href selector (maybe along with additional selectors if required)

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

demo

1
  • Great solution, I need to catch after tab show event and call to my angular function, this solution saved me couple of hours!
    – Allen
    Commented Nov 4, 2015 at 10:19
13

To add to Mosh Feu answer, if the tabs where created on the fly like in my case, you would use the following code

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

});

I hope this helps someone

1
  • great solution, with dynamically loaded content it works
    – espajava
    Commented Apr 7, 2022 at 14:50
8

This worked for me.

$('.nav-pills > li > a').click( function() {
    $('.nav-pills > li.active').removeClass('active');
    $(this).parent().addClass('active');
} );
3
  • Works perfectly for me.
    – MattD
    Commented Oct 16, 2014 at 14:44
  • 1
    This hi-jacks bootstraps default tab functionality. If you have to do this, your tabs are not initializing.
    – Archonic
    Commented May 9, 2015 at 3:53
  • 2
    This is a 'hacky' way and should be avoided. Commented Jul 18, 2017 at 16:52
2

I use another approach.

Just try to find all a where id starts from some substring.

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

A similar answer to Gerben Rampaart for bootstrap 5 tabs. Just a few differences with the current tabs HTML in the documentation:

$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).data("bs-target") // activated tab
  alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

1

In case you want a vanilla js solution for modern browser

document
    // It could also be a[data-bs-toggle="tab"]
    .querySelectorAll('button[data-bs-toggle="tab"]')
    .forEach(e => e.addEventListener("shown.bs.tab", e => console.log(e)))

Not the answer you're looking for? Browse other questions tagged or ask your own question.