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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.