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
This question is related to
jquery
twitter-bootstrap-3
This worked for me.
$('.nav-pills > li > a').click( function() {
$('.nav-pills > li.active').removeClass('active');
$(this).parent().addClass('active');
} );
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
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>
$(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');
});
Source: Stackoverflow.com