15-1-双层选项卡

<!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//用来辨别左右大的选项卡对应的显示序号
            ;

        //左侧tab控制右侧内容的显示
        for (let i=0,len=aLeftTab.length;i<len;i++){
            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";

                //获取对应的模块
                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";
                    }
                }

            };
        }

    })();

    // 大概的意思就是我首先获取左侧的tab，然后通过全局的Img和Tab获取对应左侧tab的图片和点点
    // 然后就和选项卡是一样的了
    // 但是一进去是没有执行的必须自执行一遍才能使第一页直接使用
</script>
</body>
</html>
猜你喜欢
