Js implements simple switchable tab effects, and js implements the switchover Tab

Js implements simple switchable tab effects, and js implements the switchover Tab

This article describes how to implement simple tab effects in js. Share it with you for your reference. The details are as follows:

, The simplest pure Tab

The first step is to first write html code and css styles.

<! DOCTYPE html> 
Step 2: implement simple Switching
Key Aspect 1:
abc.document.getElementsByTagName("li")
Obtain all the elements with the label li under abc, and return an element set with some attributes of the array.
Key Aspect 2: loop. The onclick event is added to li cyclically. When the onlink event is clicked, the act style of all tabs is removed and all content is hidden. Then, display the selected options and corresponding content.
Key Aspect 3:
tab_t_li[i].index = i;
In a loop, add an additional attribute to the tab and assign a value to it to correspond to the tab and content.
<! DOCTYPE html> 
Step 3: Write it as a function. The preceding statement can only use one tab on one page. If you add one, you need to copy one tab and change many variable names.
Key Point: tab_t_li [I] [evt] Because the value is a string, if it is directly written, it is tab_t_li [I]. "onclick" cannot be executed. tab_t_li ["onclick"] is fine.
Now, you can have multiple switches on a page. You only need to write the corresponding id and tag names when calling the function.
<! DOCTYPE html> 
I hope this article will help you design javascript programs.