Bootstrap tab callback event

Question

I want to add my custom function every time after change tabs.

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

Answer 1

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