Structure/performance/behavior separation tab (JQ and native JS)

Commonly used in daily projects, one is written using jquery and native JS respectively. both methods completely separate structures, representations, and behaviors. of course, you can apply multiple tabs on the same page with a slight modification.
Thoughts, The same as the conventional tab. click the Options menu to highlight and display the corresponding options. in this example, the option area is displayed or hidden by judging the index position of the clicked menu in the menu list. native js also has many implementation methods (search in blue ideal). In order to be consistent with the idea of JQ, this example uses loop judgment. for more information, see notes.
Other notes:
1. Through the demo demonstration in this article, we can clearly see the native JSWindow. onload = function (){...}With jquery's$ (Document). Ready (function (){...});The difference, which is why I do not need to define the style to hide the second three display zones in the initial state;
2. This Article is just a prototype implementation of tabs. To use multiple tabs on the same page, variables have been concentrated in the function header and can be encapsulated into functions by yourself;
3. Please do not ask how to achieve cool and cool effects. Please think about adding effects on your own;
4. If you do not want to use this effect, simply copy and paste it mechanically, consider and add it to practice, and then digest it into your own.
View Demo:Click here to view the demo
CoreCode:

// JQ version
$ ( Function (){
VaR _ Tab = $ ( ' Ul. tabnav> Li ' ) ; // Obtain the tab navigation
VaR _ Box = $ ( ' . Tabbox Div ' ) ; // Get content switch Area
VaR _ Hover = ' Hover ' ; // Display style of the current click
VaR _ Index ; // Index value
_ Tab . EQ ( 0 ) . Addclass ( _ Hover ) ; // Highlight the first navigation
_ Tab . Click ( Function (){
_ Index = _ Tab . Index ( This ) ; // Obtain the index value of the current click
$ ( This ) . Addclass ( _ Hover ) . Siblings () . Removeclass ( _ Hover ) ; // Highlight the current click
_ Box . EQ ( _ Index ) . Show () . Siblings () . Hide () ; // Display the corresponding option content area through the index value
}) . EQ ( 0 ) . Click () ;
}) ;
// Native JS version
Window . Onload = Function (){
VaR Tabnav = Document . Getelementbyid ( ' Tabnav ' ) ;
VaR List = Tabnav . Getelementsbytagname ( ' Li ' ) ;
VaR Tabbox = Document . Getelementbyid ( ' Tabbox ' ) ;
VaR Divs = Tabbox . Getelementsbytagname ( ' Div ' ) ;
VaR Hover = ' Hover ' ; // Display style of the current click
VaR Indexvalue = Function ( Self , OBJ ){ // The function used to obtain the index value. It is used to obtain the index position of the currently clicked index in the navigation bar.
For ( VaR I = 0 ; I < OBJ . Length ; I ++ ){
If ( OBJ [ I ] = Self ) Return I ;
}
} ;
VaR Index ;
List [ 0 ] . Classname = Hover ; // The first one is highlighted by default. We recommend that you define it on the page.
For ( VaR K = 1 ; K < Divs . Length ; K ++ ){ // To save trouble, use a for loop definition to display the first switching block by default and hide others. It is best to use CSS to avoid displaying all the block during page loading.
Divs [ K ] . Style . Display = ' None ' ;
}
For ( VaR L = 0 ; L < List . Length ; L ++ ){ // Click an event
List [ L ] . Onclick = Function (){
Index = Indexvalue ( This , List ) ; // Use the previously defined indexvalue function to retrieve the index value of the current click in the option navigation bar,
For ( VaR M = 0 ; M < List . Length ; M ++ ){
List [ M ] . Classname = ( M = Index ) ? Hover : '' ; // Highlight click items and remove other item highlights
}
For ( VaR N = 0 ; N < Divs . Length ; N ++ ){
Divs [ N ] . Style . Display = ( N = Index ) ? ' Block ' : ' None ' ; // Display and click the corresponding option area to hide others
}
}
}
}

 

Blog published in mr. Think: http://mrthink.net/js-jq-settab-separation/#comment-186 reprint please note