Bootstrap Tab Plugin

Tabs were introduced in the Bootstrap Navigation Elements chapter. By combining some data attributes, you can easily create a tabbed interface. With this plugin, you can place content in tabs, pill-style tabs, or even dropdown tabs.

tab.js. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can include bootstrap.js or the compressed bootstrap.min.js.

Usage

You can enable tabs in two ways:

• Through data attributes: You need to add data-toggle="tab" or data-toggle="pill" to the anchor links.

  Add the nav and nav-tabs classes to the ul to apply Bootstrap tab styles, and add the nav and nav-pills classes to the ul to apply Bootstrap pill styles.

  <ul class="nav nav-tabs">
      <li><a href="#identifier" data-toggle="tab">Home</a></li>
      ...
  </ul>
  

• Through JavaScript: You can enable tabs using JavaScript, as shown below:

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

  The following example demonstrates different ways to activate individual tabs:

  // Select tab by name
  $('#myTab a[href="#profile"]').tab('show')
  
  // Select the first tab
  $('#myTab a:first').tab('show')
  
  // Select the last tab
  $('#myTab a:last').tab('show')
  
  // Select the third tab (index starts at 0)
  $('#myTab li:eq(2) a').tab('show')
  

Fade Effect

To make tabs fade in, add the .fade class to each .tab-pane. The first tab must also have the .in class to fade in the initial content, as shown in the following example:

<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

The following example demonstrates the tab plugin using data attributes and its fade effect:

Example

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            tutorialpro.org
        </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>
  

iOS is a mobile operating system developed and released by Apple Inc. It was initially released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, sharing the Darwin foundation. OS X is used on Apple computers, while iOS is Apple's mobile version.

jMeter is an open-source testing software. It is a 100% pure Java application designed for load and performance testing.

Enterprise Java Beans (EJB) is a development architecture for creating highly scalable and robust enterprise-level applications, deployed on J2EE compatible application servers such as JBOSS, Web Logic, etc.

<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>tutorialpro.org is a site that provides the latest IT technology. This site offers free technical documentation related to website construction, helping a wide range of IT technology enthusiasts to quickly get started and build their own websites.</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS is a mobile operating system developed and distributed by Apple Inc. It was initially released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, sharing the Darwin foundation. OS X is the operating system used on Apple computers, while iOS is Apple's mobile version.</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter is an open-source testing software. It is a 100% pure Java application designed for load and performance testing.</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for creating highly scalable and robust enterprise-level applications, deployed on J2EE compatible application servers 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 the activated tab
var activeTab = $(e.target).text();
// Get the name of the previously activated tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>