Tab栏切换

一、实现效果：点击不同的a标签，让对应的image显示出来；

需求：

• 1.鼠标经过a标签时，给对应的这个a标签添加高亮效果【增加一个active的类名】
• 2.循环遍历，给每一个a注册鼠标经过事件
• 3.当a标签的下标，与div盒子下标一直的，让对应的这个div显示出来
• 4.如果这个div之前带有active类名，将这个类名移除，然后给自己加

 const a = document.querySelectorAll('.tab-nav a')
    const item = document.querySelectorAll('.tab-content .item')
    for (let i = 0; i < a.length; i++) {
      a[i].addEventListener('mouseenter',  ()=> {
        document.querySelector('.tab-nav a.active').classList.remove('active')
        //  给经过的 这个 a  添加 active 类名  (先将带有 active 类名的 a标签身上的 active 移除掉)
        this.classList.add('active')
        // 将 带有 active 的div 找出来 将其 active 类名移除
        document.querySelector('.tab-content .active').classList.remove('active')
        //  将 a 对应的 div 显示出来 就是 给他 加 active 的类名
        item[i].classList.add('active')
      })
    }

css部分

  .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .item.active {
      display: block;
    }

二、通过自定义属性，关联对应的div

 const ul = document.querySelector('.tab ul')
    const item = document.querySelectorAll('.tab-content .item')
    ul.addEventListener('mouseover', function (e) {
      if (e.target.tagName === 'A') {
        // 先将 带有 active 类名的 元素找出来 将其 class属性 active 移除掉
        document.querySelector('.tab a.active').classList.remove('active')
        //  给被点击的这个 a 标签 添加 active
        e.target.classList.add('active')
        // 获得自定义的id
        const i = e.target.dataset.id
        document.querySelector('.tab-content .active').classList.remove('active')
        // 通过 自定义属性得值 关联上 对应的 div 给他添加 active 的类名
        item[i].classList.add('active')
      }
    })

三：实现效果 点击不同的标题，显示不同的盒子

        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        .parentWrap {
            width: 200px;
            text-align: center;
            margin: 50px auto auto;

        }

        .menuGroup {
            border: 1px solid #999;
            background-color: green;
        }

        .groupTitle {
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .menuGroup>div {
            height: 200px;
            background-color: #fff;
            display: none;
        }
        .parentWrap .active span {
            background-color: red;
        }

        .parentWrap .active div {
            display: block;
        }

  <ul class="parentWrap">
        <li class="menuGroup">
            <span class="groupTitle">标题1</span>
            <div>我是弹出来的div1</div>
        </li>


        <li class="menuGroup">
            <span class="groupTitle">标题2</span>
            <div>我是弹出来的div2</div>
        </li>


        <li class="menuGroup">
            <span class="groupTitle">标题3</span>
            <div>我是弹出来的div3</div>
        </li>

        <li class="menuGroup">
            <span class="groupTitle">标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>

     <script>
        //方案1：事件委托
         const li = document.querySelector('.menuGroup')
          const span = document.querySelector('.groupTitle')
          document.querySelector('.parentWrap').addEventListener('click',function(e){
            if(e.target.tagName === 'SPAN'){
                const active = document.querySelector('.menuGroup.active')
                active && active.classList.remove('active')
                e.target.parentNode.classList.add('active')
             }
          })
        
         //方案2：循环 给span注册点击事件
        const lis = document.querySelectorAll('.menuGroup')
        const span = document.querySelectorAll('.groupTitle')
        for(let i = 0;i<span.length;i++){
            span[i].addEventListener('click',function(){
             const active = document.querySelector('li.active')
             active && active.classList.remove('active')
             lis[i].classList.add('active')
            })
        }
    </script>