Bootstrap Tab Plugin

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:

By using JavaScript:

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:

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:

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.

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:

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:

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:

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