Implement the application of tab tab, this plugin is relatively simple
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
The above brief discussion on bootstrap source code analysis tab (tab) is all the content I share with you. I hope it can give you a reference and I hope you can support Wulin.com more.