Bootstrap Tab Plugin

Tabs can be created in bootstrap by combining a few data attributes. When using the tab plugin we can add transition to tabs, pills and dropdown menus.

The tab plugin can be added into bootstrap individually by including the tab.js files. Tab plugin can also be added when we use bootstrap.js files.


Usage:

Tab plugin can be added in two different ways:


By using data attributes:

Tab plugin can be used by using data-toggle = “tab”or data-toggle = “pills” inside the anchor element. For tab styling we can add nav and nav-tabs classes in the tab ul. Likewise for pills styling we can add nav and nav-pills classes.

The following is the basic syntax for nav and nav-tabs added in tab ul:

CODE:

< ul class = “nav nav- tabs” >

<li >< a href = “#identifier” data- toggle = “tab” > Home </ a ></ li >

</ ul >


By using JavaScript:

The following code of JavaScript can be used to enable tabs:

CODE:

$ (‘#myTab a’).click (function (e) {

  1. preventDefault ()

$ (this). tab (‘show’)

})

The following are some of the statements that can be used to activate individual tabs:


Selecting by Name:

$(‘#Tab1 a[href = “#profile”]’).tab (‘show’)


Selecting by First Tab:

$(‘#Tab1 a: first’).tab(‘show’)


Selecting by Last Tab:

$(‘#Tab1 a: last’).tab(‘show’)


Selecting by third Tab:

$(‘#Tab1 li: eq(2) a’).tab(‘show’)

As index is started from 0 therefore, we used eq(2).


Fade Effect:

We can add a fade effect on tabs. This can be done by using .fade class in each of the .tab-pane. It should be noted that the first .tab-pane should have .in class. This is because to add a proper fade effect in the content. Consider the following example:

CODE:

< div class = “tab- content” >

< div class = “tab- pane fade in active” id = “Programming Languages” ></ div >

< div class = “tab- pane fade” id = “C++” ></ div >

< div class = “tab- pane fade” id = “Python” ></ div >

< div class = “tab- pane fade” id = “java” ></ div >

</ div >


Example:

Consider the following example in which tab plugin with fade effect is added through data attributes:

CODE:

<! DOCTYPE html >

< html >

< head >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

<body>

<ul id = “Tab1” class = “nav nav-tabs”>

<li class = “active”>

<a href = “#Java” data-toggle = “tab”>

Java

</a>

</li>

<li><a href = “#C++” data-toggle = “tab”>C++</a></li>

<li class = “dropdown”>

<a href = “#” id = “TabDrop1” class = “dropdown-toggle” data-toggle = “dropdown”>

Python

<b class = “caret”></b>

</a>

<ul class = “dropdown-menu” role = “menu” aria-labelledby = “TabDrop1”>

<li><a href = “About” tabindex = “-1” data-toggle = “tab”>About Python

</a></li>

<li><a href = “#Features” tabindex = “-1” data-toggle = “tab”>Features of Python</a></li>

</ul>

</li>

</ul>

<div id = “TabContent1” class = “tab-content”>

<div class = “tab-pane fade in active” id = “Java”>

<p>

Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems. Java is a programming language which is widely used to distribute the executable programs through World Wide Web. It is a general purpose language and is considered as a platform or software which can run a program. Java programming language was modeled after C++.

</p>

</div>

<div class = “tab-pane fade” id = “C++”>

<p>

One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc. The language was previously used for system programs also like for the operating systems, compilers, etc. </p>

</div>

<div class = “tab-pane fade” id = “About”>

<p>

Python is a dynamic programming language which was developed by Guido van Rossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand.

</p>

</div>

<div class = “tab-pane fade” id = “Features”>

<p>

Python is a structured programming language which also has the features of object oriented programming. The language has the simplest syntax and is easy to understand and learn. Python has an open source nature and hence the programs in python can be executed on different machines. Python is interpreted programming language that is the program is interpreted line by line.

</p>

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

java


Methods:

The method .$().tab is used to activate the tab element and content container. The tab should have data-target or href attributes. This is to target the container in DOM.

The basic syntax is as follows:

CODE:

<ul class = “nav nav-tabs” id = “Tab1”>

<li class = “active”>

<a href = “#identifier” data-toggle = “tab”> Programming Languages </a>

</li>

</ul>

<div class = “tab-content”>

<div class = “tab-pane active” id = “home”></div>

</div>

<script>

$(function () {

$(‘#Tab1 a:last’).tab(‘show’)

})

</script>


Example:

Consider the following example in which the tab plugin method is used. The second tab will be activated:

CODE:

<! DOCTYPE html >

< html >

< head >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< ul id = “Tab1” class = “nav nav- tabs” >

< li class = “active” >

< a href = “#Java” data- toggle = “tab” >

Java

</ a >

</ li >

< li >< a href = “#C++” data- toggle = “tab” > C++ < /a ></ li >

< li class = “dropdown” >

< a href = “#” id = “TabDrop1” class = “dropdown- toggle” data- toggle =  “dropdown” >

Python

< b class = “caret” >< /b >

</ a >

< ul class = “dropdown- menu” role = “menu” aria- labelledby = “TabDrop1” >

< li >

< a href = “#About” tabindex = “-1” data- toggle = “tab” >

About Python

</ a >

</ li >

< li >

< a href = “#Features” tabindex = “-1” data- toggle = “tab” >

Features of Python

</ a >

</ li >

</ ul >

</ li >

</ ul >

< div id = “TabContent1” class = “tab- content” >

< div class = “tab- pane fade in active” id = “Java” >

< p >

Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems. Java is a programming language which is widely used to distribute the executable programs through World Wide Web. < /p >

</ div >

< div class = “tab- pane fade” id = “C++” >

< p > One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc. </ p >

</ div >

< div class = “tab- pane fade” id = “About” >

< p > Python is a dynamic programming language which was developed by Guido van Rossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand. < /p >

</ div >

< div class = “tab-pane fade” id = “Features” >

< p > Python is a structured programming language which also has the features of object oriented programming. The language has the simplest syntax and is easy to understand and learn. Python has an open source nature and hence the programs in python can be executed on different machines. Python is interpreted programming language that is the program is interpreted line by line. </ p >

</ div >

</ div >

< script >

$(function () {

$ (‘#Tab1 li:eq(1) a’).tab(‘show’);

});

</ script >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

C++


Events:

Consider the following table in which the events of tab are described:

Event Description Basic Syntax
show.bs.tab This event is occurred before the new tab is shown. We use event.target and event.ralatedTarget for the activated tab and the previously activated tab. $ (‘a [data- toggle = “tab”]’).on (‘show. bs. tab’, function (e) {

e. target    e. relatedTarget })

 

shown.bs.tab This event is occurred after the tab is shown. We use event.target and event.ralatedTarget for the activated tab and the previously activated tab. $ (‘a [data- toggle = “tab”]’). on(‘shown. bs. tab’, function (e) {

e. target

e. relatedTarget

})

 

Example:

Consider the following example which demonstrates the events of tab plugin:

CODE:

<! DOCTYPE html >

< html >

< head >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<hr>

<p class = “active-tab”><strong>Current Tab</strong>: <span></span>

</p>

<p class = “previous-tab”><strong>Previous Tab</strong>:<span>

</span>

</p>

<hr>

<ul id = “Tab1” class = “nav nav-tabs”>

<li class = “active”>

<a href = “#Java” data-toggle = “tab”>

Java

</a>

</li>

<li><a href = “#C++” data-toggle = “tab”>C++</a></li>

<li class = “dropdown”>

<a href = “#” id = “TabDrop1” class = “dropdown-toggle” data-toggle = “dropdown”>

Python

<b class = “caret”></b>

</a>

<ul class = “dropdown-menu” role = “menu” aria-labelledby = “TabDrop1”>

<li>

<a href = “#About” tabindex = “-1” data-toggle = “tab”>About Python</a>

</li>

<li>

<a href = “#Features” tabindex = “-1” data-toggle = “tab”>Features of Python

</a>

</li>

</ul>

</li>

</ul>

<div id = “TabContent” class = “tab-content”>

<div class = “tab-pane fade in active” id = “Java”>

<p>

Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems. Java is a programming language which is widely used to distribute the executable programs through World Wide Web.</p>

</div>

<div class = “tab-pane fade” id = “C++”>

<p>One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc. </p>

</div>

<div class = “tab-pane fade” id = “About”>

<p>Python is a dynamic programming language which was developed by Guido van Rossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand. </p>

</div>

<div class = “tab-pane fade” id = “Features”>

<p>Python is a structured programming language which also has the features of object oriented programming. The language has the simplest syntax and is easy to understand and learn. Python has an open source nature and hence the programs in python can be executed on different machines. </p>

</div>

</div>

<script>

$(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>

</body>

</html>

The above code will generate the following result:

OUTPUT:

python

In the above example, the current tab is “Features of Python” and before this tab we were on the tab “About Python”.