Bootstrap 3 jquery event for active tab change

Question

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

Answer 1

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

Answer 2

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