选项卡操作（附源码）

今天来一波简单的选项卡操作，因为js和布局有关，特附上html和css源代码，仅供参考呦

css部分如下

  .box{width: 400px;height: 440px;border: solid 1px;text-align: center;font-size: 20px;margin: 30px auto;}
   ul,li{margin: 0;padding: 0;list-style: none;}
   ul{width: 400px;height: 40px; display: flex;border-bottom: solid 1px;background:#eee;}
   ul li{flex: 1;border-left:solid 1px ;}
   ul li.active{background:rgb(255, 145, 102);}
   .box div{width: 400px;height: 400px;display: none;}
   .box .cont1{border: none;background: salmon;display: block;}
   .box .cont2{background: sandybrown;}
   .box .cont3{background: rgb(124, 117, 168);}

html的基础布局，也是互相对应的哦

<div class="box">
    <ul>
        <li class="active">西瓜</li>
        <li>草莓</li>
        <li>葡萄</li>
    </ul>
    <div class="cont1">西瓜西瓜🍉西瓜西瓜🍉西瓜🍉西瓜西瓜🍉西瓜🍉</div>
    <div class="cont2">草莓草莓🍓草莓草莓🍓草莓🍓草莓草莓🍓草莓🍓</div>
    <div class="cont3">葡萄葡萄葡萄🍇葡萄葡萄🍇葡萄葡萄葡萄🍇葡萄葡萄🍇</div>
</div>

重头戏来啦 这里利用了ES6中新增的关键字let生成了块级作用域，在此处，块级作用域触发了闭包，会比var的更容易一点

<script>
    let oli = document.querySelectorAll('ul li');
    let acont = document.querySelectorAll('.box div')
  
    for(let i=0;i<acont.length;i++){
        oli[i].onclick = function(){
            for(let j=0;j<oli.length;j++){
                oli[j].className = ''  
                acont[j].style.display = 'none'; 
            }
            oli[i].className = 'active'
            acont[i].style.display = 'block';  
        }
    }

最后的效果大概就是下图啦 喜欢的可以试一下，点击不同卡项会触发对应的噢