JS 事件委托

e.target是实际点击对象

 <script>
    // 事件委托
    const ul = document.querySelector(`.tab-nav ul`)
    ul.addEventListener(`click`,function(e){
      // 只有点击a才会添加类和删除类
      if(e.target.tagName === `A`){
        // 排他思想 移除active
        document.querySelector(`.tab-nav .active`).classList.remove(`active`)
        e.target.classList.add(`active`)
        
        // 大盒子模块
        const id = +e.target.dataset.id
        //  排他思想
        document.querySelector(`.tab-content .active`).classList.remove(`active`)

        // 显示新图片
        document.querySelector(`.tab-content .item:nth-child(${id+1})`).classList.add(`active`)

        

      }
    })
  </script>