JS 选项卡

思路：
需要标题和页面内容两个部分，几个标题就对应几个页面，页面设置定位使其重叠，在美化一下css样式即可
当点击某个标题时，显示出与标题相关的内容，同时标题样式发生变化，然后关联需要展示的页面内容，切换标题的同时页面同时切换
1、获取元素；
2、for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件，这里用的是onclick事件；
3、点击标题时会有背景颜色，通过for循环实现当指向哪一个标题时给它添加背景，并且让其他标题的背景属性为空。
4、点击当前标题时同时展示内容。
HTML部分：

点击查看代码

<div class="box">
        <div class="box_top">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="box_bottom">
            <div><img src="./images/1.jpg" alt=""></div>
            <div><img src="./images/2.jpg" alt=""></div>
            <div><img src="./images/3.jpg" alt=""></div>
            <div><img src="./images/5.jpg" alt=""></div>
        </div>
    </div>

JS部分：

    <script>
    onload = function () {
        //获取元素
        var box = document.querySelector('.box')
        var spans = box.querySelectorAll('span')
        var divs = box.querySelector('.box_bottom').querySelectorAll('div')
        console.log(divs);
        // 标题切换

        for (var i = 0; i < spans.length; i++) {
            // 给每个span自定义一个叫做index的属性，值是i，作用是用来作为连接box_bottom的div元素
            spans[i].setAttribute('index', i)
            spans[i].onclick = function () {
                for (var j = 0; j < spans.length; j++) {
                    // 当指向哪一个span时给它添加背景，并且让其他span的背景属性为空
                    spans[j].className = ''
                    divs[j].className = ''
                }
                this.className = 'bgc'
                //切换内容
                // 获得每次this指向哪一个span时代表的值，将其转为数值类型
                var index = this.getAttribute('index') - 0
                // 当前的div设置一个show的类型
                divs[index].className = 'show'
            }
        }

    }
</script>

CSS部分：

点击查看代码

* {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        .box .box_top {
            width: 100%;
            height: 60px;
            background: rgb(168, 203, 246);
            display: flex;
            text-align: center;
            line-height: 60px;
        }

        .box .box_top span {
            flex: 1;
            cursor: pointer;
        }

        .box .box_bottom {
            height: 540px;
            width: 100%;
            background: rgb(178, 216, 237);
            position: relative;
        }

        .bgc {
            background: rgb(226, 16, 16);
            color: #fff;
        }

        .box .box_bottom div {
            height: 540px;
            width: 100%;
            background: rgb(230, 132, 71);
            font-size: 100px;
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .box .box_bottom div img {
            width: 100%;
            height: 100%;
        }

        .box .box_bottom div.show {
            display: block;
        }