Every day, Bootstrap must learn the Tab (Tab) Plug-In _ javascript skills-js tutorial

The daily required Tab plug-in of Bootstrap. You can use this plug-in to place the content on a Tab, capsule Tab, or even a drop-down menu Tab, if you are interested, you can refer to tabs. By combining some data attributes, you can easily create a Tab page.

"If you want to independently reference the plug-in function, you need to reference tab. js. Alternatively, as mentioned in the Bootstrap plug-in overview chapter, you can reference bootstrap. js or the compressed version of bootstrap. min. js. "

I. Usage
You can enable tabs in either of the following ways:

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

Adding the nav and nav-tabs classes to ul applies the Bootstrap label style, adding the nav and nav-pills classes to ul, and applying the Bootstrap capsule style.

 
 
  
  
  
Home
...
 
 

JavaScript: You can use Javscript to enable tabs, as shown below:

$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')})

The following example shows how to activate tabs in different ways:

// Select the tab $ ('# myTab a [href = "# profile"]') by name. tab ('show ') // select the first tab $ (' # myTab a: first '). tab ('show ') // select the last tab $ (' # myTab a: la '). tab ('show ') // select the third tab (index starting from 0) $ (' # myTab li: eq (2) '). tab ('show ')

Ii. Fade-in and fade-out effect
To set the fade-in and fade-out effect for the tab, Add. fade to the end of each. tab-pane. The. in class must be added to the first tab so that the initial content is displayed as follows:

 
...
 
...
 
...
 
...

Iii. Methods
. $ (). Tab: This method can activate the tab element and content container. A data-target or an href pointing to the container node in the DOM is required for the tab.

 
 
 
  
  
Home
 .....
 
 
 
...
 .....
《script》 $(function () {  $('#myTab a:last').tab('show') })《script》

Iv. Events
The following table lists the events to be used in the Tab plug-in. These events can be used as hooks in functions.

5. Basic instances
1. Tab
Tabs are also commonly referred to as Tab functions.

// Basic usage
 
 
  
  
  
HTML5
  
  
  
Bootstrap
  
  
  
JQuery
  
  
  
ExtJS
 
 
  
...
  
...
  
...
  
...

// You can set the fade-in and fade-out effect fade, while in indicates that the preferred content is displayed by default.
// You can also replace it with a capsule
 
 

  
  
// Data-target
 
 

Data-target binding or not binding works the same.

// Use JavaScript to directly use the tab method. $ ('# Nav '). on ('click', function (e) {e. preventDefault (); $ (this ). tab ('show ');});

// Event, which is similar to $ ('# nav A'). on ('Show. bs. tab', function () {alert (' triggered when tab is called! ') ;}); $ (' # Nav A'). on ('shown. bs. tab', function () {alert ('triggered when the tab is displayed! ');});

For more information, see the Bootstrap tutorial.

The above is all the content of this article, hoping to help you learn.