Bootstrap Tab Plugin

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.

Usage

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.

<!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
 <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
 <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
<!-- Tab panes -->
 <div class="tab-content">
 <div class="tab-pane active" id="home">...</div>
 <div class="tab-pane" id="profile">...</div>
 <div class="tab-pane" id="messages">...</div>
 <div class="tab-pane" id="settings">...</div>
 </div>

Via JavaScript

You can enable tabbales tabs using Javscript as below :

	$('#myTab a').click(function (e) 
	 e.preventDefault()
	 $(this).tab('show')
	)

Here is an example to activate individual tabs in different ways :

	// 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 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:

<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

Here is the example of fade effect on tab plugins using data attributes.

<ul id="myTab" class="nav nav-tabs">
 <li class="active">
 <a href="#home" data-toggle="tab">
 Tutorial Point 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>Tutorials Point 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. You also have a 
 <b>tryit</b> editor, wherein you can edit your code and 
 try out different possibilities of the 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>

Demo

Methods

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.

<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

This example shows use of .tab method of tab plugin.

<ul id="myTab" class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">
 Tutorial Point 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>Tutorials Point 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. You also have a 
 <b>tryit</b> editor, wherein you can edit your code and 
 try out different possibilities of the 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>

Demo

Events

Following mentioned list of events work with tab plugin.

1. 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
)

2. 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

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.

<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">
 Tutorial Point 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>Tutorials Point 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. You also have a 
 <b>tryit</b> editor, wherein you can edit your code and 
 try out different possibilities of the 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>

Demo

Bootstrap Tab Plugin