JS to achieve a simple switch tab effect

Source: Internet
Author: User
Tags relative tag name

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>
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.