选项卡的几种不同实现方式

选项卡结构

<div class="box">
        <ul class="tabBox">
            <li class="tab current">1</li>
            <li class="tab">2</li>
            <li class="tab">3</li>
        </ul>
        <div class="body">1</div>
        <div class="body">2</div>
        <div class="body">3</div>
 </div>

给选项卡添加css样式层

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 400px;
            margin: auto;
        }
        .tabBox{
            width: 100%;
            height: 50px;
            display: flex;
        }
        .tab{
            flex:1;
            text-align: center;
            line-height: 50px;
        }
        .tab.current{
            background: salmon;
            color: rgb(192, 112, 216);
        }
        .body{
            width: 400px;
            height: 400px;
            font-size: 50px;
            text-align: center;
            border: 1px dashed skyblue;
        }
 </style>

遵循“想要操作某个元素就先获取某个元素”的原则

第一种实现方式

<script>
//遵循“想要操作某个元素就先获取某个元素”的原则,先获取要操作的tab和body
let tabs = document.getElementsByClassName('tab'),
    bodys = document.getElementsByClassName('body');
    
   //构造一个清除类名的函数 
function clearClass(){
        // 清除 current类名
        for(var i = 0; i < tabs.length; i++){
            tabs[i].className = 'tab';// 去掉了所有tab元素的 current 类名；
            bodys[i].className = 'body';// 去掉了所有body元素的 current 类名；
        }
    }
//
 for(let i = 0; i < tabs.length; i++){
        tabs[i].onclick = function () {
            // 先清除所有的current 类名 然后再点击的元素加上
            clearClass();
            this.className = 'tab current';

            // 让body跟着改变；让对应索引的body添加current类名， 其他的移除即可
            bodys[i].className = 'body current';
        }
    }      
</script>

第二种实现方式(闭包)

//基于上面的clearClass函数
for (var i = 0; i < tabs.length; i++) {
        (function (n) {
            tabs[n].onclick = function () {
                // 先清除所有的current 类名 然后再点击的元素加上
                clearClass();
                this.className = 'tab current';

                // 让body跟着改变；让对应索引的body添加current类名， 其他的移除即可
                bodys[n].className = 'body current';
            }
        })(i)

    }

第三种实现方式（闭包）

同样基于上面的clearClass函数
function fn(n){
       return function () {
           // 点击tab  让当前元素有current类名  其他元素没有
           // 先清除所有的current 类名 然后再点击的元素加上
           clearClass();
           this.className = 'tab current';

           // 让body跟着改变；让对应索引的body添加current类名， 其他的移除即可
           bodys[n].className = 'body current';
       }   
   }
   for(var i = 0; i < tabs.length; i++){
       tabs[i].onclick = fn(i)
   }