Tabs with completely separated structure/presentation/behavior (jquery version and native JS version)_jquery

Regarding the idea, it is the same as that of regular tabs. Click the option menu, highlight it, and display the corresponding option. In the example of this article, the option area is displayed or hidden mainly by judging the index position of the clicked menu in the menu list. Native js also has There are many implementation methods (search in blue ideal). In order to be consistent with the jQ version of the idea, the example in this article uses loop judgment. See the comments for details.
A few other instructions:
1. Demonstrate through the DEMO of this article , you can clearly see the difference between native JS’s window.onload=function(){…} and jQuery’s $(document).ready(function(){…});, which is why I don’t use styles to define the initial state. The reason why the second and third display areas are hidden below;
2. This article is just a prototype implementation of the tab. If it is to be used for multiple tabs on the same page, the variables have been concentrated in the function header and can be encapsulated into functions by themselves;
3. Please don’t ask how to achieve cooler and more dazzling effects, please think about adding effects yourself;
4. I don’t want everyone to just copy and paste mechanically when using this effect, think about it and practice it, and then digest it into your own.
View Demo:

<meta charset="gb2312"> <meta name="author" content="Mr.Think">