You may also enable tabs via JavaScript. Each tab needs to be activated individually.

Example

jQuery JavaScript

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

You can activate individual tabs in several ways. Let’s take a look at the following example:

Example

jQuery JavaScript

$('#myTab a[href="#profile"]').tab("show"); // show tab targeted by the selector
$("#myTab a:first").tab("show"); // show first tab
$("#myTab a:last").tab("show"); // show last tab
$("#myTab li:eq(1) a").tab("show"); // show second tab (0-indexed, like an array)

Methods

This is the standard bootstrap’s tab method:

show

Activates the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden.

Example

jQuery JavaScript

<script>
$(document).ready(function(){
    $("#myTab a:last").tab("show"); // show last tab
});
</script>

dispose

This method destroys an element’s tab (i.e. removes stored data on the DOM element).

Example

jQuery JavaScript

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getInstance($("#myTab a:last")[0]);
        console.log(lastTab);
        // {_element: a.nav-link}

        $("#myTab a:last").tab("dispose");
        console.log(lastTab);
        // {_element: null}
    });
});
</script>

getInstance

This is a static method which allows you to get the tab instance associated with a DOM element.

Example

jQuery JavaScript

<script>
$(document).ready(function(){
    // Get tab instance on button click
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getInstance($("#myTab a:first")[0]);
        console.log(lastTab);
        // {_element: a.nav-link.active}
    });
});
</script>

getOrCreateInstance

This is a static method which allows you to get the tab instance associated with a DOM element, or create a new one in case if the tab wasn’t initialized.

Example

jQuery JavaScript

<script>
$(document).ready(function(){
    // Get or create tab instance on button click
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getOrCreateInstance($("#myTab a:first")[0]);
        console.log(lastTab);
        // {_element: a.nav-link.active}
    });
});
</script>

Events

These are the standard Bootstrap events to enhance the tab functionality.

Event	Description
show.bs.tab	This event fires on tab show, but before the new tab has been shown. You can use the event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab	This event fires on tab show after a tab has been shown. You can use the event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab	This event fires when the current active tab is to be hidden and thus a new tab is to be shown. You can use the event.target and event.relatedTarget to target the current active tab and the new tab which is going to be active very soon, respectively.
hidden.bs.tab	This event fires after the previous active tab is hidden and a new tab is shown. You can use the event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.

The following example displays the names of active tab and previous tab to the user when transition of a tab has been fully completed.

Example

jQuery JavaScript

<script>
$(document).ready(function(){
    $('a[data-bs-toggle="tab"]').on("shown.bs.tab", function(e){
        console.log(e.target); // newly activated tab
        console.log(e.relatedTarget); // previous active tab
    });
});
</script>