JS to achieve a simple switch tab effect

As pictured, the simplest pure tab

The first step, of course, is to first write HTML code and CSS style

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 This is the

The second step is to achieve a simple switching effect

Point 1:

1	Abc.document.getElementsByTagName ("Li")

Get all the tags below abc that are labeled Li, and return an element set with some properties of the array.

Point 2: Loop, first loop to Li plus onclick event, and then Onlink event click, and then loop all the tabs to remove the act style, all content hidden. Then let the clicked option and the corresponding content appear.
Point 3:

1	Tab_t_li[i].index = i;

When looping, add an extra attribute to the tab and assign a value to make the tab and content correspond.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 The

The third step is to write a function. The above writing can only be a page with a tab, if you add one, you need to copy one, and then change many variable names.

Main point: tab_t_li[i][evt] Because the value of the time is a string, if the direct writing is tab_t_li[i]. OnClick "Such words can not be executed, tab_t_li[" onclick "] This implementation is no problem.

OK, now a page can have more than one switch, only need to call the function, write the corresponding ID name and tag name, the event name can be

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45, 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

<! DOCTYPE html>