A comprehensive analysis of how to Use the tab (tab) in Bootstrap _javascript tips

This article examples for you to implement the Tab tab application, the plug-in is relatively simple, the specific contents are as follows
source file:
Tab.js

Implementation principle:
1. When you click an element, first remove the original highlighted element
2, then to the clicked element to highlight
3, if the click Element is a drop-down box of an option, select itself, and choose the dropdown box
5. If the animation is defined, the animation is performed first and then the callback

SOURCE Analysis:
1. The show method, which is triggered when you click an element, triggers the following four events
1.1, Hiden.bs.tab: Hide the previous element
1.2, Show.bs.tab: Display the current element
1.3, Hideen.bs.tab: Hide the previous element complete
1.4, Shown.bs.tab: Display the current element complete
1.5, Hiden/show Event source code:

var $previous = $ul. Find ('. Active:last a ')
 var hideevent = $. Event (' Hide.bs.tab ', {
 relatedtarget: $this [0]
 })
 var showevent = $. Event (' Show.bs.tab ', {
 relatedtarget: $previous [0]
})

2. Active: activating the current object
2.1, add the Aria-expanded property to the navigation element, mark whether this element is in the expanded state
2.2, the use of reflow mechanism, the acquisition of offsetwidth properties to achieve partial redraw

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 Plugin Usage Tutorial

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

The above is the entire content of this article, I hope to learn JavaScript program to help you.