In this tutorial we are introducing Toggle Tab Plugin of Bootstraps. Tabs you have already get knowledge in tutorial Bootstrap Navigation Elements. Tabbed interface can be creating easily with the use of some data attributes. Using this bootstrap tab plugin you can transition through panes of local content in tabs or pills, even via dropdown menus.
If you want to implement functionality of this plugin individually, simple include the tag.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.
These tabbable tabs can be enable in the following two ways.
Via data attributes
These two attributes you need to add data-toggle=”tab” or data-toggle=”pill” on the <a> element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding thenav and nav-pills classes will apply pill styling.
You can enable tabbales tabs using Javscript as below :
Here is an example to activate individual tabs in different ways :
To create fading effect for tabs, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content:
Here is the example of fade effect on tab plugins using data attributes.
This method .$().tab: activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.
This example shows use of .tab method of tab plugin.
Following mentioned list of events work with tab plugin.
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.
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.
This is an example to show the use of both events of tab plugin and you will see here display the previous and current visited tabs.