js 小案例事件委托 选项卡实现

京东选项卡部分

var spcialTab = document.querySelector('.spcial-tab'),
    ddHead = document.querySelector('.dt-head '),
    ddHeadlia = document.querySelectorAll('#dt'),
    //内容li集合
    ddBodyli = document.querySelector('.dd-body').children;
    for(var i = 0; i<ddHeadlia.length;i++){
        ddHeadlia[i].index=i;
    }
    ddHead.onmouseover = function (ev) {
    var targer = ev.target;
    if(targer.parentNode.tagName== 'LI'){
        index = targer.index;
        console.log(index);
        for(var i = 0 ;i<ddHeadlia.length;i++){
            ddHeadlia[i].className = '';
            ddBodyli[i].className = '';
        }
        ddHeadlia[index].className = 'active';
        ddBodyli[index].className = 'active';
    }

}

html部分 

<!--每日特价部分-->
    <div class="special-prices layer clearfix">
        <div class="special-left fl">
            <div class="special-title clearfix">
                <h3><a href="#" class="day-title">每日特价</a></h3>
                <i class="iconfont"></i>
            </div>
            <div class="spcial-tab">
                <ul class="dt-head clearfix">
                    <li><a href="#" id="dt" class="active">精选</a></li>
                    <li><a href="#" id="dt">美食</a></li>
                    <li><a href="#" id="dt">百货</a></li>
                    <li><a href="#" id="dt">个护</a></li>
                    <li><a href="#" id="dt">预告</a></li>
                </ul>
                <ul class="dd-body">
                    <li class="active">精选</li>
                    <li >美食</li>
                    <li>百货</li>
                    <li>个护</li>
                    <li>预告</li>
                </ul>
            </div>
        </div>

.fr {
    float: right;
}
.fl{
    float: left;
}
.layer {
    width: 1200px;
    margin:0px auto;
}
/* 每日特价区 */
.special-prices {
    margin-bottom:20px;
}
/* 每日特价左边区域 */
.special-prices .special-left {
    position: relative;
    width: 595px;
    height: 340px;
    background-color: white;
    
}
.special-prices .special-left .special-title {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
}
.special-prices .special-left .special-title .day-title{
    font-size: 30px;
    float: left;
}
.special-prices .special-left .spcial-tab {
   
}
.special-prices .special-left .spcial-tab .dt-head  {
    position: absolute;
    right: 20px;
    top: 20px;
    /* border: 1px solid red; */
}
.special-prices .special-left .spcial-tab .dt-head li {
    font-size: 14px;
    float: left;
    margin: 0px 14px;
    line-height: 14px;
    position: relative;
}
.special-prices .special-left .spcial-tab .dt-head li a{
   display: block;
   border-bottom: 3px solid transparent;
   padding: 0px 0px 2px 0px;
}
.special-prices .special-left .spcial-tab .dt-head li a.active{
   color: red;
   border-bottom: 3px solid red;
}
.special-prices .special-left .spcial-tab .dd-body {
    overflow: hidden;
    width: 560px;
    height: 270px;
    margin: 0 auto;
}
.special-prices .special-left .spcial-tab .dd-body li{
    display: none;
    box-sizing: border-box;
    width: 560px;
    height: 270px;
    padding: 0px 20px;
    border: 1px solid gray;
    background: powderblue;
 }
 .special-prices .special-left .spcial-tab .dd-body li.active{
   display: block;
 }
/* 每日特价右边区域 */
.special-prices .special-right {
    width: 595px;
    height: 340px;
    background-color: pink;
    
}