date1101选项卡效果```html header_1 header_2 header_3 content_1 co

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .header {
            width: 600px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: pink;
            display: flex;
        }

        .header li {
            width: 200px;
        }

        .content {
            width: 600px;
            height: 400px;
            line-height: 400px;
            text-align: center;
        }

        .header .active {
            background-color: aquamarine;
        }

        .content li {
            display: none;
            font-size: 50px;
        }

        .content .active {
            display: block;
            background-color: orange;
        }
    </style>
</head>

<body>
    <ul class="header">
        <li>header_1</li>
        <li class="active">header_2</li>
        <li>header_3</li>
    </ul>
    <ol class="content">
        <li>content_1</li>
        <li class="active">content_2</li>
        <li>content_3</li>
    </ol>

    <script>
        // 获取所有li标签
        const oHeader = document.querySelectorAll('.header>li');
        // const oContent = document.querySelectorAll('.content>li');
        const oContent = [...document.querySelectorAll('.content>li')];

        // 循环遍历header中的每一个value1 , index1
        // 也就是拿到其中的每一个value1 , index1
        oHeader.forEach(function (value1 , index1) {

            console.log(value1);

            // 给每一个li标签添加点击事件
            // 也就是给value1添加点击事件
            value1.onclick = function () {

                // 首先要删除所有的active样式
                // 就要循环遍历伪数组oHeader
                oHeader.forEach(function (value2 , index2) {

                    // 清除所有的active样式和content中的样式
                    // 清除所有的样式是因为其他li不知道我现在这个li要添加样式
                    // 所有干脆一开始就把所有的样式给清除掉
                    value2.classList.remove('active');
                    oContent[index2].classList.remove('active');
                })

                // 再添加样式
                value1.classList.add('active');
                oContent[index1].classList.add('active');

            }
        })
    </script>


</body>

</html>