TAB

What I wrote before is put here to review……

TabList [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] : [I] At this point, the global “I” is already the final result of the loop 3…

/ / get all the li element div elements var tabList = document. QuerySelectorAll (". Tabox. TAB > li "). conList = document.querySelectorAll(".tabox .content>div"); var prevIndex=0; for(var i=0; i<tabList.length; i++){ item.onclick=function(){ tabList[i].className='active' } }Copy the code

Recommended Index *****

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> * {margin: 0; padding: 0; } ul, ol { list-style: none; } .tabox { margin: 20px auto; width: 500px; } .tabox .tab { display: flex; position: relative; top: 1px; } .tabox .tab li { padding: 10px 20px; background-color: #eee; border: 1px solid #bbb; margin-right: 10px; cursor: pointer; } /* Select white */.tabox.tab li.active {background-color: # FFF; border-bottom-color: #fff; } .content div { width: 400px; height: 150px; border: 1px solid #bbb; padding: 5px; box-sizing: border-box; display: none; } .content div.active { display: block; </style> </head> <body> <div class="tabox"> <ul class=" TAB "> <li class="active" index="0"> </li> <li The index = "1" > movie < / li > < li index = "2" > variety < / li > < / ul > < div class = "content" > < div class = "active" > you are my city camp < / div > < div > < / div > my sister </div> </div> <script> let tabBox = document.querySelector('.tabox'), tabList = tabBox.querySelectorAll('.tab li'), conList = tabBox.querySelectorAll('.content div'); let prevIndex = 0; Tabbox. onclick = function (ev) {let target = ev.target; If (target.tagName === "LI") {if (target.tagName === "LI") {let index = +target.getAttribute('index'); if (index === prevIndex) return; tabList[index].className = conList[index].className = 'active'; tabList[prevIndex].className = conList[prevIndex].className = ''; prevIndex = index; }}; </script> </body> </html>Copy the code

Custom attribute version recommended index ****

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> * {margin: 0; padding: 0; } ul, ol { list-style: none; } .tabox { margin: 20px auto; width: 500px; } .tabox .tab { display: flex; position: relative; top: 1px; } .tabox .tab li { padding: 10px 20px; background-color: #eee; border: 1px solid #bbb; margin-right: 10px; cursor: pointer; } /* Select white */.tabox.tab li.active {background-color: # FFF; border-bottom-color: #fff; } .content div { width: 400px; height: 150px; border: 1px solid #bbb; padding: 5px; box-sizing: border-box; display: none; } .content div.active { display: block; } < / style > < / head > < body > < div class = "tabox" > < ul class = "TAB" > < li class = "active" > TV series < / li > < li > movie < / li > < li > variety < / li > < / ul > <div class="content"> <div class="active"> You are my city camp </div> <div> my sister </div> </div> / / get all the li element div elements var tabList = document. QuerySelectorAll (". Tabox. TAB > li "). conList = document.querySelectorAll(".tabox .content>div"); var prevIndex=0; for(var i=0; i<tabList.length; i++){ var item=tabList[i]; // Get the current item. MyIndex = I; Item.onclick =function(){var curIndex=this.myIndex; //*** I is not the index of the current click, but the result of the loop 3[i&item are global variables] //*** this: the current operation LI //4. If (prevIndex===curIndex)return; if(prevIndex===curIndex)return; TabList [curIndex]. ClassName =conList[curIndex]. ClassName ='active'; TabList [prevIndex]. ClassName =conList[prevIndex]. ClassName = ""; PrevIndex =curIndex; prevIndex=curIndex; } } </script> </body> </html>Copy the code

Use closure mechanism to solve the self-executing function recommendation index **

<script> var tabList = document.querySelectorAll(".tabox .tab>li"), conList = document.querySelectorAll(".tabox .content>div"); // The variable "I" is not private, but its parent context "EC(G) global"; At this point, the global "I" is already the final result of the loop 3... var prevIndex = 0; for (var i = 0; i < tabList.length; I++) {// each round of the loop executes a self-executing function: Take a parameter I, and take the value of global I of the current loop, Pass it to him // Round 1 global I =0 EC(AN1) closure 1 private I =0 // Round 2 global I =1 EC(AN2) closure 2 private I =1 // Round 3 group I =2 EC(AN3) closure 3 private I =2 // Now we manually add a layer of context in the form of a closure that assigns the click event to the element on the page Function (I) {var item = tabList[I]; function (I) {var item = tabList[I]; item.onclick = function () { if (i === prevIndex) return; tabList[i].className = conList[i].className = 'active'; tabList[prevIndex].className = conList[prevIndex].className = ''; prevIndex = i; }; })(i); } <script>Copy the code

Use closure mechanisms to solve the return function recommendation index **

So every time we loop through for, we bind a click event to Li, and the click event is the little function inside the return, so we have an undestroyed context where when we click on Li, the little function inside the return is executed, and the variable I is the private variable I inside the self-executing function

<script> var tabList = document.querySelectorAll(".tabox .tab>li"), conList = document.querySelectorAll(".tabox .content>div"); var prevIndex = 0; for (var i = 0; i < tabList.length; i++) { var item = tabList[i]; // Round 1 global I =0 closure 1 private I =0 // Round 2 global I =1 closure 2 private I =1 //...... item.onclick = (function (i) { return function () { if (i === prevIndex) return; tabList[i].className = conList[i].className = 'active'; tabList[prevIndex].className = conList[prevIndex].className = ''; prevIndex = i; }; })(i); } <script>Copy the code

Use closure mechanism to solve forEach recommendation index **

<script> var tabList = document.querySelectorAll(".tabox .tab>li"), conList = document.querySelectorAll(".tabox .content>div"); var prevIndex = 0; ForEach (function (item, I) {// first loop closure I =0 // second loop closure I =1 //.... Item.onclick = function () {// I is not private, the parent context is the NTH closure... If (I === prevIndex) return; tabList[i].className = conList[i].className = 'active'; tabList[prevIndex].className = conList[prevIndex].className = ''; prevIndex = i; }; }); <script>Copy the code

Use [let] to solve the recommendation index ***

Let appear in {} generates a parent block-level private context, and each round loop to generate a block-level private context < script > var tabList = document. QuerySelectorAll (". Tabox. TAB > li "). conList = document.querySelectorAll(".tabox .content>div"); let prevIndex = 0; for (let i = 0; i < tabList.length; i++) { let item = tabList[i]; item.onclick = function () { if (i === prevIndex) return; tabList[i].className = conList[i].className = 'active'; tabList[prevIndex].className = conList[prevIndex].className = ''; prevIndex = i; }; } </script>Copy the code