选项卡

实现方式：
1、闭包
2、动态获取-设置属性

实现效果：

image.png

先设置统一样式：

• html：

<div class="sel">
      <div class="btn">
            <button>html</button>
            <button>css</button>
            <button>javascript</button>
      </div>
      <ul class="content">
            <li>HTML是超文本标记语言</li>
            <li>CSS是层叠样式表</li>
            <li>JavaScript是弱类型解释型脚本语言</li>
      </ul>
</div>

• css：

        *{
            margin: 0;
            padding: 0;
            list-style: none;
            outline: none;
        }
        .sel{
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
        }
        .btn{
            font-size: 0;
        }
        .btn button{
            width: 33.33%;
            height: 50px;
            margin: 0;
            cursor: pointer;
        }
        .content li{
            width: 100%;
            height: 150px;
            display: none;
        }
        .content li:nth-child(1){
            display: block;
        }

一、闭包

1.原理

• 1.(i)---for循环i先把所有的点击事件预加载入空间，然后并没有被点击触发执行；
• 2.btns[k]---当点击相应的按钮时，执行function(k)函数；
• 3.ali[j]---for循环j是先把全部的方块隐藏，再显示点击的相应的btns[k]会显示相应的ali[k]。

2.js代码

for(var i=0;i<btns.length;i++){
     (function(k){//这里的k值是 形参
          btns[k].addEventListener("click",function(){
              //console.log(k);//点击哪个按钮显示哪个值
              for(var j=0;j<ali.length;j++){
                  ali[j].style.display="none";
              }//全部先隐藏
              ali[k].style.display="block";//点击哪个哪个显示出来
          })
     })(i);//这里的i值是 实参（实参也可以是一个变量）
}

二、动态获取-设置属性

1.原理

• 动态获取：通过给btn自定义属性index，并赋值为i，点击第N个btn对应赋值给第N个ali

2.js代码

var btns=document.querySelectorAll(".btn button");
var ali=document.querySelectorAll(".content li");       
            
for(i=0;i<btns.length;i++){
/*动态获取*/        
    btns[i].index = i;//自定义按钮属性index，并赋值为i
    btns[i].addEventListener("click",function(){
        //console.log(this);//相应按钮div
        //console.log(this.index);//相应按钮位置数
        for(var j=0;j<ali.length;j++){//先把全部隐藏
            ali[j].style.display="none";
        }
        ali[this.index].style.display="block";//选择btns的i 对应显示ali[this.index]即ali[i]
    })
}