Bootstrap label page (tab) plugin _javascript tips for everyday learning

tab (tab) by combining some of the data properties, you can easily create a tab-page interface.

"If you want to refer to the functionality of the plug-in separately, you need to refer to tab.js." Alternatively, as mentioned in the Bootstrap Plug-in Overview chapter, you can refer to the Bootstrap.js or compressed version of Bootstrap.min.js. "

One, usage
You can enable tab pages in two ways:

With the Data property: You need to add data-toggle= "tab" or data-toggle= "pill" to the anchor text link.

Add nav and Nav-tabs class to UL, will apply Bootstrap tag style, add nav and Nav-pills class to UL, will apply Bootstrap capsule style.

<ul class= "Nav nav-tabs" >
 <li><a href= "#identifier" data-toggle= "tab" >home</a></li > ...
</ul>

JavaScript: You can use Javscript to enable tab pages, as follows:

$ (' #myTab a '). Click (function (e) {
 e.preventdefault ()
 $ (this). tab (' Show ')
})

The following example demonstrates activating individual tabs in different ways:

Select a Label page by name
$ (' #myTab a[href= ' #profile] '). tab (' Show ')
 
//Select first tab
$ (' #myTab a:first '). tab (' Show ') 
 
//Select the last tab page
$ (' #myTab a:last '). tab (' Show ') 
 
//Select the Third tab (starting with 0 index)
$ (' #myTab Li:eq (2) a '). tab (' Show ')

Second, fade effect
If you need to set a fade effect for the tab page, Add. Fade to each. Tab-pane. The first tab page must add the. In class to fade in the initial content, as shown in the following example:

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

Third, the method
. $ (). Tab: This method activates the label page element and the content container. The tab page needs to use a data-target or an href pointing to the container node in the DOM.

<ul class= "nav nav-tabs" id= "Mytab" > <li class= "
 active" ><a "#identifier" href= "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 >

Iv. Events
The following table lists the events that you want to use in the tab page (tab) plug-in. These events can be used as hooks in the function.

V. Basic examples
1. Label page
The tab page is usually called the tabs feature.

/Basic usage <ul class= "nav nav-tabs" > <li class= "active" > <a href= "#html5" data-toggle= "tab" >HTML5</a> </li> <li> <a href= "#bootstrap" data-toggle= "tab" >bootstrap&
  lt;/a> </li> <li> <a href= "#jquery" data-toggle= "tab" >jQuery</a> </li> <li> <a href= "#extjs" data-toggle= "tab" >ExtJS</a> </li> </ul> <div class= "tab-content" style= " padding:10px; " > <div class= "tab-pane active" id= "HTML5" > ... </div> <div class= "Tab-pane" id= "Bootstrap" >.
 .
 </div> <div class= "Tab-pane" id= "jquery" > ... </div> <div class= "Tab-pane" id= "ExtJS" > ... </div> </div> 

You can set the fade effect fade, and in represents the preferred content default display

<div class= "Tab-pane fade in Active" id= "HTML5" >
//can also be replaced with capsule

< UL class= "Nav nav-pills" >
//data-target

Using Data-target or unbound effects is the same

Using JavaScript, use the tab method directly.

$ (' #nav a '). On (' click ', Function (e) {
 e.preventdefault ();
 $ (this). tab (' Show ');
}); 

event, other identical

$ (' #nav a '). On (' Show.bs.tab ', function () {
 alert (' Trigger when calling tab '). ');
});

$ (' #nav a '). On (' Shown.bs.tab ', the function () {
 alert (') is triggered when the tab is displayed! ');
}); 

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.