Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our Bootstrap tutorial, we will be looking at Bootstrap Tab Plugin.
We introduced tabs in the tutorial Bootstrap Navigation Elements. By simply combining a few data attributes, you can easily create a tabbed interface. With this plugin, you can transition through panes of local content in tabs or pills, even via dropdown menus.
We introduced tabs in the tutorial Bootstrap Navigation Elements. By simply combining a few data attributes, you can easily create a tabbed interface. With this plugin, you can transition through panes of local content in tabs or pills, even via dropdown menus.
If you want to add this bootstrap plugin functionality individually, you are going to need tab.js. Else, as mentioned in the tutorial Bootstrap plugins overview, you can include bootstrap.js or the manified bootstrap.min.js.
Usage
You can enable tabs in the following two ways below -
- Via data attributes - You need to add the data-toggle ="tab" or data-toggle = "pill" to the anchors
Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.
<ul class = "nav nav-tabs"> <li><a href = "#identifier" data-toggle = "tab">Home</a></li> ... </ul>
- Via JavaScript - You can enable tabs using JavaScript as shown below -
$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') })
- Below is an example of different ways to activate individual tabs -
// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
// Select first tab
$('#myTab a:first').tab('show')
// Select last tab
$('#myTab a:last').tab('show')
// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')
Fade Effect
To get a fade effect for tabs, add the .fade class to each .tab-pane. The first tab pane must also have .in class to properly fade in initial content -
<div class = "tab-content"> <div class = "tab-pane fade in active" id = "home">...</div> <div class = "tab-pane fade" id = "svn">...</div> <div class = "tab-pane fade" id = "ios">...</div> <div class = "tab-pane fade" id = "java">...</div> </div>
Example
Following below is an example of tab plugin using data attributes and fade effect -
<ul id = "myTab" class = "nav nav-tabs"> <li class = "active"> <a href = "#home" data-toggle = "tab"> WebDesignTutorialz Home </a> </li> <li><a href = "#ios" data-toggle = "tab">iOS</a></li> <li class = "dropdown"> <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown"> Java <b class = "caret"></b> </a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1"> <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li> <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li> </ul> </li> </ul> <div id = "myTabContent" class = "tab-content"> <div class = "tab-pane fade in active" id = "home"> <p>WebDesignTutorialz is a place for beginners in all technical areas. This website covers most of the latest technologies and explains each of the technology with simple examples.</p> </div> <div class = "tab-pane fade" id = "ios"> <p>iOS is a mobile operating system developed and distributed by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, with which it shares the Darwin foundation. iOS is Apple's mobile version of the OS X operating system used on Apple computers.</p> </div> <div class = "tab-pane fade" id = "jmeter"> <p>jMeter is an Open Source testing software. It is 100% pure Java application for load and performance testing.</p> </div> <div class = "tab-pane fade" id = "ejb"> <p>Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level applications to be deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p> </div> </div>
Output
When the above example is executed, it will produce the following result -
WebDesignTutorialz is a place for beginners in all technical areas. This website covers most of
the latest technoligies and explains each of the technology with simple examples.
Methods
.$().tab - This method is used to activate a tab element and the content container. Tab should have either a data-target or an href targeting a container node in the DOM.
<ul class = "nav nav-tabs" id = "myTab"> <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li> ..... </ul> <div class = "tab-content"> <div class = "tab-pane active" id = "home">...</div> ..... </div> <script> $(function () { $('#myTab a:last').tab('show') }) </script>
Example
The following example shows the usage of tab plugin method .tab. Here in the example the second tab iOS is activated -
<ul id = "myTab" class = "nav nav-tabs"> <li class = "active"> <a href = "#home" data-toggle = "tab"> WebDesignTutorialz Home </a> </li> <li><a href = "#ios" data-toggle = "tab">iOS</a></li> <li class = "dropdown"> <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown"> Java <b class = "caret"></b> </a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1"> <li> <a href = "#jmeter" tabindex = "-1" data-toggle = "tab"> jmeter </a> </li> <li> <a href = "#ejb" tabindex = "-1" data-toggle = "tab"> ejb </a> </li> </ul> </li> </ul> <div id = "myTabContent" class = "tab-content"> <div class = "tab-pane fade in active" id = "home"> <p>WebDesignTutorialz is a place for beginners in all technical areas. This website covers most of the latest technologies and explains each of the technology with simple examples.</p> </div> <div class = "tab-pane fade" id = "ios"> <p>iOS is a mobile operating system developed and distributed by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, with which it shares the Darwin foundation. iOS is Apple's mobile version of the OS X operating system used on Apple computers.</p> </div> <div class = "tab-pane fade" id = "jmeter"> <p>jMeter is an Open Source testing software. It is 100% pure Java application for load and performance testing.</p> </div> <div class = "tab-pane fade" id = "ejb"> <p>Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level applications to be deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p> </div> </div> <script> $(function () { $('#myTab li:eq(1) a').tab('show'); }); </script>
Output
When the above example is executed, it will produce the following result -
iOS is a mobile operating system developed and distributed by Apple Inc. Originally released
in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, with which it
shares the Darwin foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.
READ: Bootstrap | Modal Plugin
Events
The following table lists the events to work with tab plugin. This event may be used to hook into the function -
| Event | Description | Example |
|---|---|---|
| show.bs.tab | This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. | $('a[data-toggle = "tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab }) |
| shown.bs.tab | This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. | $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab }) |
Example
The following example shows the usage of tab plugin events. Here in the example, we will display the current and previous visited tabs -
<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 id = "myTab" class = "nav nav-tabs"> <li class = "active"> <a href = "#home" data-toggle = "tab"> WebDesignTutorialz Home </a> </li> <li><a href = "#ios" data-toggle = "tab">iOS</a></li> <li class = "dropdown"> <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown"> Java <b class = "caret"></b> </a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1"> <li> <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a> </li> <li> <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a> </li> </ul> </li> </ul> <div id = "myTabContent" class = "tab-content"> <div class = "tab-pane fade in active" id = "home"> <p>WebDesignTutorialz is a place for beginners in all technical areas. This website covers most of the latest technologies and explains each of the technology with simple examples.</p> </div> <div class = "tab-pane fade" id = "ios"> <p>iOS is a mobile operating system developed and distributed by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, with which it shares the Darwin foundation. iOS is Apple's mobile version of the OS X operating system used on Apple computers.</p> </div> <div class = "tab-pane fade" id = "jmeter"> <p>jMeter is an Open Source testing software. It is 100% pure Java application for load and performance testing.</p> </div> <div class = "tab-pane fade" id = "ejb"> <p>Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level applications to be deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p> </div> </div> <script> $(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) { // Get the name of active tab var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }); }); </script>
Output
When the above example is executed, it will produce the following result -
Active Tab:
Previous Tab:
WebDesignTutorialz is a place for beginners in all technical areas. This website covers most of
the latest technoligies and explains each of the technology with simple examples.
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Tooltip Plugin.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.