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

ゝ一世哀愁。 2022-09-12 15:58 172阅读 0赞

京东选项卡部分

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;
        
    }