1. 效果展示

网页中经常出现这样的展示效果，试着实现了一下

2. 代码分析

这里其实涉及一个非常重要的思想，就是先排除其他元素，再给自己设置。仔细观察，分为上下两个模块，

上面的li盒子需要绑定click事件，触发的时候，上面的盒子移除active类名，然后给自己添加active类名
下面的main盒子触发的时候，下面的盒子移除selected类名，然后给对应下标的盒子添加selected类名

3.代码展示

这里主要展示思想，省去了css代码

<style>
    .products .main.selected {
      display: block;
    }

    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
  </style>

<body>
  <!-- 版心盒子 -->
  <div class="wrapper">
    <!-- tab头部选项卡标签 -->
    <ul class="tab">
      <li class="tab-item active">国际大牌<span>◆</span></li>
      <li class="tab-item">国妆名牌<span>◆</span></li>
      <li class="tab-item">清洁用品<span>◆</span></li>
      <li class="tab-item">男士精品</li>
    </ul>
    <!-- products -->
    <div class="products">
      <div class="main selected">
        <a href="###"><img src="images/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="images/guozhuangmingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="images/qingjieyongpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="images/nanshijingpin.jpg" alt="" /></a>
      </div>
    </div>
  </div>

  <script>
    /* 思路分析：点击上方li元素
            1. li元素排他：  （1）兄弟移除类名active  （2）自己新增类名active
            2. main盒子排他：  （1）兄弟移除类名selected  （2）自己新增类名selected
      */
    // 1.获取元素
    let tabItemList = document.querySelectorAll('.tab-item'),
      mainList = document.querySelectorAll('.products .main')
    // 2.注册事件
    // 循环为每一个注册事件
    for (let i = 0; i < tabItemList.length; i++) {
      tabItemList[i].onclick = function () {
        // （1）类名干掉已经选中的或者显示的（需要重新选中dom对象）
        // 类名干掉选中的tab-head（一个不用循环）
        document.querySelector('.tab-item.active').classList.remove('active')
        // 类名干掉显示的tab-body
        document.querySelector('.main.selected').classList.remove('selected')

        // （2）类名加上正选中的和要显示的
        // 类名加上tab-head
        this.classList.add('active')
        // 类名加上tab-body
        mainList[i].classList.add('selected')
      }
    }
  </script>
</body>

dom语法实现选项卡的切换

1. 效果展示

2. 代码分析

3.代码展示