15-2-优化双层选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{font-family: "Microsoft YaHei",serif;}
        body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;}
        ol,ul,li{margin: 0;padding: 0;list-style: none;}
        img{border: none}
        #wrap{
            width: 430px;
            height: 240px;
            margin: 50px auto;
            user-select: none;
        }
        #wrap .leftTab{
            float: left;
            width: 100px;
            height: 100%;
        }
        #wrap .leftTab li{
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #000;
            color: #fff;
            font-size: 12px;
            margin-bottom: 2px;
            cursor: pointer;
        }
        #wrap .leftTab li.on{
            background-color: #f60;
        }
        #wrap .content{
            position: relative;
            float: right;
            width: 320px;
            height: 200px;
        }
        #wrap .content .right{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 320px;
            height: 240px;
        }
        #wrap .content .right.on{
            display: block;
        }
        #wrap .content .right ul.img{
            position: relative;
            width: 100%;
            height: 100%;
        }
        #wrap .content .right ul.img li{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #wrap .content .right ul.img li.on{
            display: block;
        }
        #wrap .content .right ul.tab{
            position: absolute;
            bottom: 5px;
            left: 10px;
            width: 100%;
            height: 70px;
        }
        #wrap .content .right ul.tab li{
            float: left;
            width: 30px;
            height: 30px;
            background-color: #000;
            color: #fff;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            margin-right: 10px;
            cursor: pointer;
        }
        #wrap .content .right ul.tab li.on{
            background-color: #f60;
        }
        #wrap .content .right .img li img{
            width: 320px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <!--左侧tab按钮-->
    <div class="leftTab">
        <ul>
            <li class="on">豪车</li>
            <li>美味</li>
            <li>美女风景</li>
        </ul>
    </div>

    <!--右侧图片区-->
    <div class="content">
        <div class="right on">
            <!--豪车-->
            <ul class="img">
                <li class="on"><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
            </ul>
            <ul class="tab">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <!--美食-->
        <div class="right">
            <ul class="img">
                <li class="on"><img src="img/5.jpg" alt=""></li>
                <li><img src="img/6.jpg" alt=""></li>
                <li><img src="img/7.jpg" alt=""></li>
                <li><img src="img/8.jpg" alt=""></li>
                <li><img src="img/9.png" alt=""></li>
            </ul>
            <ul class="tab">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <!--美女-->
        <div class="right">
            <ul class="img">
                <li class="on"><img src="img/10.jpg" alt=""></li>
                <li><img src="img/11.jpg" alt=""></li>
                <li><img src="img/12.jpg" alt=""></li>
                <li><img src="img/13.jpg" alt=""></li>
                <li><img src="img/14.jpg" alt=""></li>
                <li><img src="img/15.jpg" alt=""></li>
            </ul>
            <ul class="tab">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
    </div>
</div>
<script>
    (function () {
        let aLeftTab = document.querySelectorAll("#wrap .leftTab li"),
            aRightContent = document.querySelectorAll("#wrap .content .right"),
            aImg = document.querySelectorAll("#wrap .right .img"),
            aTab = document.querySelectorAll("#wrap .right .tab"),
            index = 0,//用来辨别左右大的选项卡对应的显示序号
            len = aLeftTab.length;

        function leftTab(i) {
            //左侧tab控制右侧content的内容
            aLeftTab[i].onclick = function () {
                if (index === i) return;
                aLeftTab[index].className = "";
                aRightContent[index].className = "right";
                index = i;
                aLeftTab[index].className = "on";
                aRightContent[index].className = "right on";
            };
        }

        function rightTab(i) {
            //右侧每一块都初始添加tab控制img时间
            let aImgLi = aImg[i].querySelectorAll("li"),
                aTabLi = aTab[i].querySelectorAll("li"),
                len1 = aImgLi.length,
                index1 = 0;
            for (let j=0;j<len1;j++) {
                aTabLi[j].onclick = function () {
                    if (j===index1)return;
                    aImgLi[index1].className = "";
                    aTabLi[index1].className = "";
                    index1=j;
                    aImgLi[index1].className = "on";
                    aTabLi[index1].className = "on";
                }
            }
        }

        for (let i=0;i<len;i++) {
            leftTab(i);
            rightTab(i);
        }
    })();


    //左侧值关注右侧的内容，重复点击的时候会造成资源浪费
    //我们直接就把所有的对应好了放在那里  所以用到了右侧也用到了for
</script>
</body>
</html>
15-2-优化双层选项卡

猜你喜欢
