Java Tutorial Blog

Bootstrap Tab Plugin

//  by 

This tutorial highlights the use of Bootstrap tab plugin for the navigation. In general, the term tab allows for the user to access different parts of the menu or webpage. We can create dynamic tabs by clicking on tabbable areas or navigation panes to navigate to contents on the webpage. The most often used navigation is tab based navigation which contains large amount of data within small area separating content into different navigation panes where each pane can be view able one at a time.

The tab plugin provided by Bootstrap can be used to access content in tabs or pills or even through dropdown menu. For more information about tab based navigation, just refer this link: Bootstrap Navigation Elements.

also read:

We can create tabbable tabs by using following two ways:

  • Via Data Attributes
  • Via JavaScript

Bootstrap Tabs via Data Attributes

We can create tab component by using data-toggle=”tab” on each tab within an anchor tab. We are using the tab-content class as the parent element and tab-pane class to create tabs via data attributes. We are creating tab-pane for every tab with unique ID and wrapping them within tab-content class. While switching from one tab to another tab, to get fade effect for tabs, add the .fade class to each .tab-pane class.

The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tab Navigation via Data Attributes</h2>
<ul class="nav nav-tabs">
	 <li class="active"><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
	 <li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
	 <li class="dropdown">
	    <a href="#" data-toggle="dropdown" class="dropdown-toggle">JS Frameworks<span class="caret"></span></a>
	    <ul class="dropdown-menu">
	       <li><a data-toggle="tab" href="#dropdown1">JavaScript</a></li>
	       <li><a data-toggle="tab" href="#dropdown2">JQuery</a></li>
	    </ul>
	 </li>
</ul>
<div class="tab-content">
   <div id="mydropdown1" class="tab-pane fade in active">
      <h3>HTML</h3>
      <p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.
      HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
   </div>
   <div id="mydropdown2" class="tab-pane fade">
	<h3>CSS</h3>
	<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
   </div>
   <div id="dropdown1" class="tab-pane fade">
	<h3>JavaScript</h3>
	<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
	</p>
   </div>
   <div id="dropdown2" class="tab-pane fade">
	<h3>JQuery</h3>
	<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
   </div>
</div>
</div>
</body>
</html>

Bootstrap Tabs via DataAttributes Example

Bootstrap Tabs via JavaScript

We create tab navigation by using JavaScript code as shown the below example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $("#DemoTab a").click(function(e){
      e.preventDefault();
      $(this).tab('show');
   });
});
</script>
</head>
<body>
<div class="container">
<h2>Tab Navigation via JavaScript</h2>
<ul class="nav nav-tabs" id="DemoTab">
	 <li><a href="#mydropdown1">HTML</a></li>
	 <li class="active"><a href="#mydropdown2">CSS</a></li>
	 <li class="dropdown">
	    <a href="#" data-toggle="dropdown" class="dropdown-toggle">JS Frameworks<span class="caret"></span></a>
	    <ul class="dropdown-menu">
	       <li><a href="#dropdown1">JavaScript</a></li>
	       <li><a href="#dropdown2">JQuery</a></li>
	    </ul>
	 </li>
</ul>
<div class="tab-content">
   <div id="mydropdown1" class="tab-pane fade">
      <h3>HTML</h3>
      <p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
   </div>
   <div id="mydropdown2" class="tab-pane fade in active">
	<h3>CSS</h3>
	<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
   </div>
   <div id="dropdown1" class="tab-pane fade">
	<h3>JavaScript</h3>
	 <p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
	</p>
   </div>
   <div id="dropdown2" class="tab-pane fade">
	<h3>JQuery</h3>
	<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
   </div>
</div>
</div>
</body>
</html>

Bootstrap Tabs via JavaScript Example

Bootstrap Tab Methods

It’s possible to enable the tab element and view content of the particular tab by using method called $().tab. For targeting specific container, we should have either data-target or a href in the DOM. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
      $("#DemoTab li:eq(1) a").tab('show');
});
</script>
</head>
<body>
<div class="container">
<h2>Tab Navigation using Method</h2>
<ul class="nav nav-tabs" id="DemoTab">
	 <li><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
	 <li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
	 <li class="dropdown">
	    <a href="#" data-toggle="dropdown" class="dropdown-toggle">JS Frameworks<span class="caret"></span></a>
	    <ul class="dropdown-menu">
	       <li><a href="#dropdown1" data-toggle="tab">JavaScript</a></li>
	       <li><a href="#dropdown2" data-toggle="tab">JQuery</a></li>
	    </ul>
	 </li>
</ul>
<div class="tab-content">
   <div id="mydropdown1" class="tab-pane fade">
      <h3>HTML</h3>
      <p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
   </div>
   <div id="mydropdown2" class="tab-pane fade in active">
	<h3>CSS</h3>
	<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
   </div>
   <div id="dropdown1" class="tab-pane fade">
	<h3>JavaScript</h3>
	 <p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
	</p>
   </div>
   <div id="dropdown2" class="tab-pane fade">
	<h3>JQuery</h3>
	<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
   </div>
</div>
</div>
</body>
</html>

Bootstrap Tab Events Example

Bootstrap Tab Events

The following table shows four events which are used with tab to provide more functionality to the tab.

Event Type Description
show.bs.tab It is used before the new tab has been shown.
shown.bs.tab It triggers after the tab has been shown.

The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $('a[data-toggle="tab"]').on('shown.bs.tab',function(e){
      var activeTab=$(e.target).text();
      var previousTab=$(e.relatedTarget).text();
      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
   });
});
</script>
</head>
<body>
<div class="container">
<h2>Tab Navigation using Events</h2>
<ul class="nav nav-tabs">
	 <li class="active"><a href="#mydropdown1" data-toggle="tab">HTML</a></li>
	 <li><a href="#mydropdown2" data-toggle="tab">CSS</a></li>
	 <li class="dropdown">
	    <a href="#" data-toggle="dropdown" class="dropdown-toggle">JS Frameworks<span class="caret"></span></a>
	    <ul class="dropdown-menu">
	       <li><a data-toggle="tab" href="#dropdown1">JavaScript</a></li>
	       <li><a data-toggle="tab" href="#dropdown2">JQuery</a></li>
	    </ul>
	 </li>
</ul>
<div class="tab-content">
   <div id="mydropdown1" class="tab-pane fade in active">
      <h3>HTML</h3>
      <p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages.</p>
   </div>
   <div id="mydropdown2" class="tab-pane fade">
	<h3>CSS</h3>
	<p>CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
   </div>
   <div id="dropdown1" class="tab-pane fade">
	<h3>JavaScript</h3>
	<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world.All modern HTML pages are using JavaScript.It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
	 </p>
   </div>
   <div id="dropdown2" class="tab-pane fade">
	<h3>JQuery</h3>
	<p>jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.jQuery is easy to learn. jQuery is a lightweight, "write less, do more", JavaScript library.The purpose of jQuery is to make it much easier to use JavaScript on your website.</p>
   </div>
</div>
   <p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
   <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
</div>
</body>
</html>

Bootstrap Tab Events Example

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.