原生js实现简单的选项卡

选项卡

点击栏目切换电影
HTML结构：

<div class="header">
        <h3 class="active">喜剧</h3>
        <h3>爱情</h3>
        <h3>玄幻</h3>
        <h3>都市</h3>
    </div>
    <div class="content">
        <div class="box show">
            <img src="./01.png" alt="">
            <img src="./01.png" alt="">
            <img src="./01.png" alt="">
            <img src="./01.png" alt="">
        </div>
        <div class="box">
            <img src="./02.png" alt="">
            <img src="./02.png" alt="">
            <img src="./02.png" alt="">
            <img src="./02.png" alt="">
        </div>
        <div class="box">
            <img src="./03.png" alt="">
            <img src="./03.png" alt="">
            <img src="./03.png" alt="">
            <img src="./03.png" alt="">
        </div>
        <div class="box">
            <img src="./04.png" alt="">
            <img src="./04.png" alt="">
            <img src="./04.png" alt="">
            <img src="./04.png" alt="">
        </div>
    </div>

CSS结构：

<style>
        *{margin: 0;padding: 0;}
        img{vertical-align: middle;}
        .header{
            overflow: hidden;
            height: 50px;
        }
        .header h3{
            float: left;
            line-height: 50px;
            width: 100px;
            text-align: center;
        
        }
        .center{
            overflow: hidden;
        }
        .content img{
            margin-bottom: 30px;
        }
        .content div{
            display: none;
        }

        /* 点击后样式 */
        .header .active{
            background-color: blue;
            color: #fff;
        }
        .content .show{
            display: block;

        }
    </style>

JS代码：

<script>
        var btn = document.querySelectorAll('.header h3')
        var boxs = document.querySelectorAll('.content div')
        // console.log(btn);
        // 记录上次active的下标，在下次点击的时候清除这次的类名
        var prevIndex = 0;
        // 获取鼠标点击标题事件
        for(var i = 0;i < btn.length;i++){
            btn[i].index = i;
            // 为每个按钮绑定点击事件
            btn[i].onclick = function(){
                // 清除上次显示的下标
                btn[prevIndex].className = '';
                boxs[prevIndex].className = '';
                // 为当前事件触发对象添加下标
                this.className = 'active'
                boxs[this.index].className = 'show';
                // 记录这次显示的下标，方便下次清除
                prevIndex = this.index;

            }
        }
    </script>

总结：这是一种利用现实隐藏页面结构实现的选项卡功能，本质是对下标的确定和类名的添加删除；提前写好css样式，再根据下标动态的添加类名删除类名，为页面结构批量添加样式；