js中的排他思想

原创已于 2022-04-29 08:59:03 修改 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-26 23:22:23 首次发布

什么是排他思想

就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除再设置当前元素。

注意：
1.所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式（留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

下面通过一个小案例可以去运用一下它，在最终的效果中，我们可以看到，当我点击其中的按钮（比如首页），效果也会跟着实现，有兴趣的朋友可以复制过去运行试试，相信你一定可以更好地区理解、运用。

最终效果：
在这里插入图片描述

<!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>首页</li>
      <li>文章列表</li>
      <li class="active">发表文章</li>
      <li>关于我们</li>
    </ul>

    <script>
      // 1.获取元素
      let lis = document.querySelectorAll('li')
      // 2.遍历伪数组，为其中的每个元素绑定单击事件
      for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function() {

          // 3.1 找到当前有active样式的li元素，清除它的active样式
          // li.active:交集选择器：要求它是li元素的同时还要拥有active样式
          document.querySelector('li.active').classList.remove('active')

          // 3.2 为当前元素添加active样式
          // lis[i].classList.add('active')
          this.classList.add('active')
        })
      }
    </script>
  </body>
</html>