Shulou(Shulou.com)06/01 Report--

This article mainly shows you "JS how to achieve simple Tab column switching", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "JS how to achieve simple Tab column switching" this article.

The details are as follows

Requirements: when the mouse clicks the corresponding tab (tab) above, the content of the following page changes accordingly.

Structural analysis:

All the contents are put in a big box, which can be divided into two boxes: the top box and the bottom box.

The box above contains five li and five small tabs, one of which will be selected by default

The box below also contains five div modules, which correspond to the above options one by one. Currently, only the first div is displayed by default.

The idea of realization is:

Click to toggle the tab section

Tab column switching has two large modules

1, the tab of the above module, click on one, change the current style, the background color becomes red, the font color becomes white. While the other tab styles do not change (exclusive thinking)

This is achieved by changing the class name.

2. The content of the following module will change with the tabs above. So the following module changes are written into the click event.

Rule: the contents of the following modules correspond to the tabs above and match.

Core idea: add custom attributes to all li in the above module, with the attribute value starting from 0 as the index number.

Exclusive idea: iterate through the elements in the array through the for loop. After entering the loop, you first eliminate the styles of all parts, and then add styles to the current part you click on.

Create a custom attribute through setAttribute (name,value), name refers to the custom attribute set for the element, and value is the attribute value added to the custom attribute.

Get the attributes of the element through getAttribute (name). Name is the name of the property.

The following module corresponding to the default first tab is displayed and needs to be added in the inline style (style='display:block') because the CSS inline style takes precedence over the external style and will be displayed first.

The sentence (items [index]. Style. Display = 'block';) is also equivalent to creating an inline style.

Implementation code:

Tab bar switch * {margin:0; padding:0;} .tab {width:800px; height:45px; border:1px solid # ccc; border-bottom:1px solid # c81623; background: # fafafa; position:relative; margin:100px auto;} .tab _ list li {width:160px; height:45px List-style:none; line-height:45px; text-align: center; float:left;} .tab _ list .current {background-color:#c81623; color:#fff;} .item {width:800px; height:200px; padding-top:40px; / * line-height:200px;*/ font-size: 30px Color:#fff; text-align: center; text-shadow:2px 2px 4px # 0000000; background: # efefef; / * opacity: 0.8 ownership / top:47px; position:absolute } Personality recommendation list, anchors, radio charts, singers' daily songs recommendation, boutique song list, love recommendation For the most music-savvy, you are addicted to smoking, emotional Voice, New songs soaring list, singers list var tab_list = document.querySelector ('.tab _ list') Var lis = tab_list.querySelectorAll ('li'); var items = document.querySelectorAll (' .item'); / / for loop binds the click event for (var item0 / I < lis.length;i++) {lis.setAttribute ('index',i); lis.onclick = function () {/ / for (var item0 < lis.length) This.className +) {lis.className =';} / leave the this.className = 'className / / below display content module var index = this.getAttribute (' index'); console.log (index) / / remove the other item and let them be hidden / / only the current item is left, so that it shows for (var iTuno

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.