Bootstrap - Tab Plugin

Aditya kumar
Last Updated: May 13, 2022

Introduction

Bootstrap navigation elements were introduced to style the navigation bar. Additional features are added to these nav tabs as plug-ins. The plug-in allows switching between panes of views using nav-tabs. On clicking each nav-tab ,a single pane of view will be shown to the user. It is in a similar context with conditional rendering. The identity of content is referenced inside the click handler of the tab and the plugin helps rendering that particular view.

How to enable tab-plugin?

Using data attributes

<ul class = "nav nav-tabs">
  <li><a href = "#idOfTabPane" data-toggle = "tab">Adarsh</a></li>
</ul>


Add data-toggle=” tab” or “tabs” to the anchor elements. This will work to switch to the tab-pane indicated by the href identifier “idOfTabPane”. 

Using javascript

$('#Tab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})
<ul class="nav nav-tabs" id="Tab">
   <li><a href="temp">Home</a></li>
</ul>


Here, we add a click handler to the anchor element inside the navbar indicated by “Tab” to make the pane content switch to href of that particular anchor.

Tab Content and tab pane

<div class="tab-content">
   <div class="tab-pane" id="home">Home view</div>
</div>


Tab Content is a container where tab panes are sitting. Tab panes are individual tabs mentioned in href of each of the anchor elements while giving data-toggle attributes above. All of the tab panes will switch and reside inside of the tab-content container.

Introducing fade effect

To add a fade effect means to add a level of styling while switching between panes in the view. In order to add a fade effect, we need to give a “fade” class to each of the tab-pane containers.

<div class = "tab-content">
  <div class = "tab-pane fade in active" id = "home">Home</div>
  <div class = "tab-pane fade" id = "cart">cart pane</div>
  <div class = "tab-pane fade" id = "aboutus">About us</div>
  <div class = "tab-pane fade" id = "profile">Profile</div>
</div>

$().tab method

This method activates or switches to the particular tab-pane on the view. Below is an example of how to use it.

<ul class = "nav nav-tabs" id = "Tab">
  <li class = "active"><a href = "#home" data-toggle = "tab">Home</a></li>
</ul>

<div class = "tab-content">
  <div class = "tab-pane active" id = "home">...</div>
</div>

<script>
  $(function () { // switch to last anchor element
     $('#Tab a:last').tab('show')
  })
</script>

Many ways to activate a tab pane on the view

// Select tab by name
$('#Tab a[href = "#about"]').tab('show')
// Select first tab
$('#Tab a:first').tab('show')

// Select last tab
$('#Tab a:last').tab('show')

// Select first tab (0-indexed)
$('#Tab li:eq(1) a').tab('show')

Events in tab plugin

show.bs.tab

This event is triggered before the new active tab is shown. One can use event.target and event.relatedTarget to target the active and previously active tab.

$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab if available
})


shown.bs.tab

This event is triggered after the tab is shown. It is used similar to the code mentioned above.

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})


Example:

<html>
 <body>
   <hr />
   <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
   <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
   <hr />
   <ul class="nav nav-tabs" id="Tab">
     <li><a href="#home" data-toggle="tab"> Home</a></li>
     <li><a href="#about" data-toggle="tab">About </a></li>
     <li><a href="#contact" data-toggle="tab">Contact us</a></li>
   </ul>

   <div class="tab-content">
     <div class="tab-pane" id="home">
       <p>home pane</p>
     </div>
     <div class="tab-pane" id="about">about pane</div>
     <div class="tab-pane" id="contact">contact us pane</div>
   </div>
 </body>
 <script>
   $(function () {
     $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
       var activeTab = $(e.target).text();
       var previousTab = $(e.relatedTarget).text();
       $(".active-tab span").html(activeTab);
       $(".previous-tab span").html(previousTab);
     });
   });
 </script>

Frequently Asked Questions

  1. What other style can be given to nav elements?

You can use nav-pills as another way to style navbar anchors

<ul class = "nav nav-pills">
  <li class = "active"><a href = "#">Home</a></li>
  <li><a href = "#">Home</a></li>
  <li><a href = "#">About us</a></li>
  <li><a href = "#">Cart</a></li>
  <li><a href = "#">Packages</a></li>
</ul>

2. How to reference a particular tab-pane in the nav-bar?

You can reference the id of the tab-pane in the href attribute of the anchor tag element. Say the tab-pane has id “home”, provide “#home” to href attribute to make the tab plugin aware of the tab-pane to show on being active.

<a href=”#home” data-toggle=”tab”>home</a>


<div class=”tab-content”>
<div class=”tab-pane>Home pane</div>
</div>

Key takeaway

Congrats on getting through this article, we went through all of the concepts in the tab plugin and also saw some examples implementing the same. We saw multiple ways to activate a tab-pane onto the view and also the events associated with tab-panes.

If you want to get started with bootstrap for free and want to learn more about it then you can visit Learn Bootstrap and check out our blog to know why bootstrap is cool and how it helps you in designing your website with Responsive Network Vanilla utilising HTML, CSS & Bootstrap.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think