Bootstrap - Tab Plugin

Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes, you can easily create a tabbed interface. With this plug-in you can transition through panes of local content in tabs or pills, even via drop down menus.
You can enable tabs in the following two ways −
Via data attributes − you need to add 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.
Via data attributes − you need to add 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 Javscript as below −
Via JavaScript − you can enable tabs using Javscript as below −
$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})
Here’s an example of different ways to activate individual tabs −
Here’s 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') 

To get a fade 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>
An example of tab plugin using data attributes and fade effect is as shown in the following example −
<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 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>


               Tutorial Point Home
            

iOS

Java 
               


jmeter
ejb


jmeter
ejb
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.
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.
jMeter is an Open Source testing software. It is 100% pure 
            Java application for load and performance testing.
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.
            
.$().tab − This method 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>
The following example shows the use 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">
         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 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>

            Tutorial Point Home

iOS

Java 



                  jmeter


                  ejb




                  jmeter


                  ejb

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.
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.
jMeter is an Open Source testing software. It is 100% pure 
            Java application for load and performance testing.
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.
            
Following table lists the events to work with tab plugin. This event may be used to hook into the function.
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})
The following example shows use 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">
         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 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>
Active Tab: 
Previous Tab: 

            Tutorial Point Home
iOS


               Java 

jmeter
ejb


jmeter
ejb
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.
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.
jMeter is an Open Source testing software. It is 100% pure 
            Java application for load and performance testing.
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.
            

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page