使用事件委托写选项卡效果

事件委托

当很多子元素需要添加相同的事件时，可以将事件交给父元素或者祖先元素做，这样可以减少事件监听的个数，减少内存的消耗
为什么可以交给父元素或者祖先元素做呢
本质上是利用了事件的冒泡机制，当点击子元素时，会向外冒泡，父元素或者祖先元素也会被触发到

效果如下：

本功能知识点：
1.当移动到上面文字时，文字会变色，但是其他的不会变，需要使用一个变量来记录前一个的状态（排他思想需要使用到for循环，性能太差）
2.当点击上面文字时，下面的也会发生改变，可以有两种方法来实现

• 可以发现文字的序号和下面方框的序号是对应的，所以可以获取上面文字的序号，这样就可以得到是下面的哪一个灰色方框
• 可以使用自定义属性，文字和方框绑定相同的属性值

css和html代码

 <style>
        .music{
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        ul{
            height: 50px;
            /* background-color: #ddd; */
            list-style:none;
            padding: 0;
            margin:0;
        }
    ul li{
        width: 100px;
        height: 100%;
        line-height: 50px;
        text-align: center;
        float: left;
        margin-right: 10px;
    }
    .music-content{
        width: 600px;
        height: 300px;
        /* background-color:red; */
        overflow: hidden;
        text-align: center;
        line-height: 300px;
        font-size: 30px;
    }
    .music-content .item{
        width: 100%;
        height: 100%;
        background-color:#ddd;
        display: none;
       
    }
    .current{
        color: red;
    }
        
    </style>
     <div class="music">
        <ul class="music-tab">
            <li class="current" data-id="a">最新</li>
            <li data-id="b">内地</li>
            <li data-id="c">港台</li>
            <li data-id="d">欧美</li>
            <li data-id="e">韩国</li>
        </ul>
        <div class="music-content">
            <div class="item" data-id="a" style="display: block;">最新</div>
            <div class="item" data-id="b">内地</div>
            <div class="item" data-id="c">港台</div>
            <div class="item" data-id="d">欧美</div>
            <div class="item" data-id="e">韩国</div>
          </div>
    </div>

js代码（分为两种做法）
第一种

 var ul=document.querySelector(".music-tab");
 var ItemList=document.querySelectorAll(".music-content div");
var list=document.querySelectorAll(".music-tab li");
var preLi=ul.firstElementChild;//记录前一个的状态
var preDiv=ItemList[0];
ul.onmouseover=function(e){
            var target=e.target;
            var tagName=target.tagName.toLowerCase();
            if(tagName!=="li") return;
            //一点击文字颜色变红
            preLi.classList.remove("current");
            target.classList.add("current");
            preLi=target;
            var id=target.dataset.id;
            preDiv.style.display="none";
            var item=document.querySelector(".music-content .item[data-id="+id+"]");
            item.style.display="block";
            preDiv=item;

第二种

var ul=document.querySelector(".music-tab");
var ItemList=document.querySelectorAll(".music-content div");
var list=document.querySelectorAll(".music-tab li");
        var preLi=ul.firstElementChild;
        var preDiv=ItemList[0];
        //得让每一个li上面都绑定一个元素index
        for(var i=0;i<list.length;i++){
            list[i].index=i;
         }
        ul.onmouseover=function(e){
            var target=e.target;
            var _index=target.index;
            var tagName=target.tagName.toLowerCase();
            if(tagName!=="li") return;
            //一点击文字颜色变红
            preLi.classList.remove("current");
            target.classList.add("current");
            preLi=target;
            preDiv.style.display="none";
            ItemList[_index].style.display="block";
             preDiv=ItemList[_index];