样式代码

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

    ul,
    ol {
        list-style: none;
    }

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

    .header li {
        width: 200px;
    }

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

    .content li {
        display: none;
    }

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

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

body代码

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

需求:

    header:
     点击其中任意一个 li 的时候, 给点击的 li 添加一个类名(active)
     然后给其他的 li 取消类名
     content:
     根据选中了 header 下的那个 li, 然后对应的展示自身的哪一个 li
     
     header: 给点击的 li 添加一个类名(active), 然后给其他的 li 取消类名
     解决: 1. 给所有的 li 全都取消类名;  2. 给当前点击的 li 添加一个类名
      
     content: 根据选中了 header 下的那个 li, 然后对应的展示自身的哪一个 li
     解决:   1. 给所有的 li 全都取消类名;
             2. 根据点击了 header 内的那个li, 给对应顺序的li添加一个类名

补充:

将伪数组转换为真实数组的方法

    伪数组: document.querySelectorAll('.header li')
           转换为真的数组: [...伪数组]

0. 获取元素

    var headerLi = [...document.querySelectorAll('.header li')]
    var contentLi = [...document.querySelectorAll('.content li')]
    

消除类名

    headerLi[0].onclick = function () {
        // 给当前元素添加类名, 给其他元素取消类名
    }
    headerLi[1].onclick = function () {
        // 给当前元素添加类名, 给其他元素取消类名
    }
    headerLi[2].onclick = function () {
        // 给当前元素添加类名, 给其他元素取消类名
    }

用遍历的方式完成上边的功能 基础版; 只有功能1

    headerLi.forEach(function (item) {
        item.onclick = function () {    // 给 header 内部的每一个 li 添加点击事件

1. 给所有的 li 全都取消类名

            // headerLi[0].classList.remove('active')
            // headerLi[1].classList.remove('active')
            // headerLi[2].classList.remove('active')
            

优化版

            headerLi.forEach(function (li) {
                li.classList.remove('active')
            })

2. 给当前点击的 li 添加类名

            item.classList.add('active')
       

包含功能2

    headerLi.forEach(function (item, index) {
        item.onclick = function () {    // 给 header 内部的每一个 li 添加点击事件
            // 1. 给所有的 li 全都取消类名
            headerLi.forEach(function (li, liIndex) {
                li.classList.remove('active')

                /**
                 *  因为 header 和 content 的 li 数量一定是相同的
                 *  所以我们可以省略一个 forEach, 利用一个 循环, 完成两个 li 的取消类名
                */
                contentLi[liIndex].classList.remove('active')
            })

            // 2. 给当前点击的 li 添加类名
            item.classList.add('active')
            contentLi[index].classList.add('active')
        }
    })