tab切换效果

<style>
        *{
            margin: 0;
            padding:0;
        }

        ul,ol,li{
            list-style: none;
        }

        .cont{
            width: 800px;
            height: 600px;
            border: 5px solid hotpink;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .cont ul{
            width: 100%;
            height: 60px;
            display: flex;
        }

        .cont ul li{
            flex:1;
            font-size: 35px;
            color: #fff;
            background: lightskyblue;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .cont ul li:nth-of-type(2){
            border-left: 2px solid blue;
            border-right: 2px solid blue;
        }
        .cont ol{
            flex:1;
            position: relative;
        }

        .cont ol li{
            width: 100%;
            height: 100%;
            font-size: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top:0;
            left:0;
            background: gold;
            display: none;
        }

        /* 按钮标签 哪个标签有这个属性,哪个就显示特殊背景颜色 */
        .cont ul li.active{
            background: honeydew;
            color: black;
        }

        /* 内容标签 哪个标签有这个属性,哪个就显示 */
        .cont ol li.active{
            display: flex;
        }

    </style>

<div class="cont">
        <ul>
            <li class="active">按钮1</li>
            <li>按钮2</li>
            <li>按钮3</li>
        </ul>
        <ol>
            <li class="active">内容1</li>
            <li >内容2</li>
            <li>内容3</li>
        </ol>
    </div>

<script>
        // tab切换 / 选项卡 效果

        // 实现思路:
        // 1, ul中的li标签个数  和 ol中li标签个数是相同的
        //    按钮和内容是一一对应的

        // 2, 点击按钮标签,也就是ul中的li标签
        //    给当前这个li标签,添加class样式,给其他的li标签,去除class样式
        //    实现思路: 先给所有的li标签,去除class样式
        //             再给当前的li标签,添加class样式

        // 3, 点击按钮标签,也就是ul中的li标签
        //    给 ol 中所有的 li标签,去除class样式
        //    给 与 当前 ul>li 索引相同的 ol>li标签,添加样式


        var oUllis = document.querySelectorAll('ul li');
        var oOllis = document.querySelectorAll('ol li');

        // 循环 ul中的所有li,添加点击事件
        oUllis.forEach(function(item , key){
            // ul中的li标签 , item就是ul中的li标签
            item.onclick = function(){
                // 1,清除所有的ul,ol,中li的class样式属性
                // 循环遍历所有的ul和ol中的标签
                oUllis.forEach(function(v , k){
                    // v是ul中的li标签
                    v.className = '';
                    // ul>li和ol>li索引是相同的
                    // 通过ul中li的索引也可以获取ol中的li标签
                    // oOllis[k] 就是 ol中的li标签
                    oOllis[k].className = '';
                })
                // 循环结束,所有的ul,ol中,li都没有active


                // 给当前点击的item标签,也就是ul,li标签,添加样式
                item.className = 'active';

                // 给ol中,对应的这个标签的索引的li标签,添加样式
                oOllis[key].className = 'active';
            }
        })

        // 不想用forEach,也可以试试事件委托


        // 总结
        // 核心思路:
        //   利用 ul 和 ol 中 li标签个数相同的 特点,优化程序,简化代码
        // 1,获取标签对象
        // 2,给所有的ul中的li标签,添加点击事件
        // 3,点击事件执行的内容
        //   (1),给所有的ul和ol中的li标签,清除样式
        //   (2),给当前点击的ul中的li标签,添加样式
        //   (3),给索引相同的ol中的li标签,添加样式

        // 可以用自己的方式实现,比如多写几个循环,分别操作ul和ol中的标签
        // 不过我的方法比较简单

        // 也可以尝试事件委托的方式,给div标签,添加点击事件
        // 判断点击的li标签,定义程序
        // 不过这样的话,要给ul中li标签,添加不少的设定,以区别ul>li和ol>li

    </script>

效果如下：