Bootstrap 3 jquery event for active tab change
$('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>
$(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.
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'); });