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

Source: Internet
Author: User
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.

Related Article

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.