'Bootstrap tab callback event

Bootstrap tab nav-tabs callback click function,

<ul class="nav nav-tabs">
    <li class>
        <div>
            <a href="#logo"></a>
        </div>
    </li>
    <li class = "active"></li>
    <li class></li>
</ul>
<div id="logo">
</div>

Here i want to add my custom function every time after change tab,

jquerybootstrap-modal


Solution 1:[1]

Try below code, from reference

<script type="text/javascript">
$(document).ready(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });
});
</script>

Solution 2:[2]

You should use the show.bs.tab and shown.bs.tab listeners:

$('.nav-tabs').find('a').on('show.bs.tab', function () {
    // Some code you want to run when tab is clicked (before the tab is shown)
});

$('.nav-tabs').find('a').on('shown.bs.tab', function () {
    // Some code you want to run after the tab is shown (callback)
});

Other options and listeners available here: W3Schools bootsrap tabs

Solution 3:[3]

Are you looking for something like this?

$(document).ready(function(){
  // Listen with the jQuery to the tabs click:
  $('#myTabs a').click(function (link) {
    console.log(link.currentTarget.innerText);
  })
})
<!-- Latest compiled and minified CSS for Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JS for JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JS for Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    

<ul class="nav nav-tabs" id="myTabs">
  <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
  <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
  <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
  <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home content</div>
  <div class="tab-pane" id="profile">Profile content</div>
  <div class="tab-pane" id="messages">Message content</div>
  <div class="tab-pane" id="settings">Settings content</div>
</div>

Please read official bootstrap documentation, before posting question like that.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 John
Solution 2 isherwood
Solution 3

Related Questions