This example introduces the application of implementing the tab tab. This plug-in is relatively simple. The specific content is as follows
Source code file:
tab.js
Implementation principle:
1. When clicking an element, first cancel the originally highlighted element.
2. Then highlight the clicked element
3. If clicking an element is an option in the drop-down box, select itself and also select the drop-down box.
5. If the animation is defined, execute the animation first and then callback
Source code analysis:
1. The Show method is triggered when an element is clicked, which will trigger the following four events.
1.1. Hiden.bs.tab: hide the previous element
1.2. Show.bs.tab: Show the current element
1.3. Hideen.bs.tab: Completed by hiding the previous element
1.4. Shown.bs.tab: Show 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: Activate the current object
2.1. Add aria-expanded attribute to the navigation element to mark whether this element is in the expanded state
2.2. Using the reflow mechanism, use the offsetWidth attribute to achieve partial repainting
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
This series of tutorials has been compiled into: Bootstrap Basic Tutorials Special Topic, welcome to click to learn.
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.