Creating Tabs with Bootstrap
Tab based navigations provides a powerful mechanism to handle huge amount of content within a small area through separating content into different panes where each pane is viewable one at a time.
User can quickly access the content through switching between the panes without leaving the page. The following example will show you how to create the basic tabs using the Bootstrap tab component.
Example
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>— The output of the above example will look something like this:
The tabs plugin also works with pills nav. To create pill nav just replace the class .nav-tabs with .nav-pills in the tab markup, as shown in the following example:
Example
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>— The output of the above example will look something like this:
Creating Dynamic Tabs via Data Attributes
You can activate a tab or pill navigation without writing any JavaScript code — simply specify the data-bs-toggle="tab" on each tab, or data-bs-toggle="pill" on each pill, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content.
Let’s take a look at an example to understand how to create dynamic tabs via data attributes.
Example
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>Home tab content ...</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Profile tab content ...</p>
</div>
<div class="tab-pane fade" id="messages">
<p>Messages tab content ...</p>
</div>
</div>Tip: The .fade class is added to each .tab-pane to make tabs fade in while showing new tab content. Also, you must add .active class to a .nav-link, as well as .show and .active classes to the corresponding .tab-pane to make it initially visible.
Creating Dynamic Tabs via JavaScript
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>
Leave a Reply