排他思想排他思想使用所有元素全部清除样式（干掉其他人）给当前元素设置样式（留下我自己）方法一方法二

排他思想

使用

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）

方法一

<body>
  <ul class="list">
    <li class="active">首页</li>
    <li>文章列表</li>
    <li>发表文章</li>
    <li>关于我们</li>
  </ul>
  <script>
    // 获取元素
    let lis = document.querySelectorAll('li')
    console.log(lis);
    // 遍历伪数组；为其中的每个元素绑定单击事件
    for (let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function () {
        // 遍历所有元素，把有active样式的元素删除其样式
        for (let i = 0; i < lis.length; i++) {
          lis[i].classList.remove('active')
        }
        // this:谁触发事件，谁就是事件处理函数中的this
        this.classList.add('active')
      })

    }
  </script>
</body>

方法二

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            width: 600px;
            display: flex;
            height: 50px;
        }

        li {
            flex: 1;
            background-color: #ccc;
            border-right: 1px solid blue;
            line-height: 50px;
            text-align: center;
        }

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

<body>
    <ul class="list">
        <li class="active">首页</li>
        <li>文章列表</li>
        <li>发表文章</li>
        <li>关于我们</li>
    </ul>
    <script>
        // 获取元素
        let lis = document.querySelectorAll('li')
        // 遍历伪数组
        for (let i = 0; i < lis.length; i++) {
            // 为每个子元素绑定单击事件
            lis[i].addEventListener('click', function () {
                // 找到子元素中带有active样式的li，并删除它的样式
                document.querySelector('li.active').classList.remove('active')
                // this:谁触发事件，谁就是事件处理函数中的this
                // 再为this添加active的样式
                this.classList.add('active')
            }
            )
        }
    </script>
</body>

</html>