JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Tab Plugin

July 22, 2014 by Krishna Srinivasan Leave a Comment

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:

  • Bootstrap Setup
  • Bootstrap Typography

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:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Tabs via DataAttributes Example

Bootstrap Tabs via DataAttributes Example

Bootstrap Tabs via JavaScript

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

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Tabs via JavaScript Example

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:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Tab Method Example

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:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Tab Events Example

Bootstrap Tab Events Example

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

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.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved