Tap选项卡

黄大帅@lz

已于 2023-01-13 00:02:24 修改

阅读量280

点赞数

分类专栏：前端（html+css+js）文章标签： javascript css 前端

于 2023-01-12 20:56:07 首次发布

本文链接：https://blog.csdn.net/gua_Piter/article/details/128664754

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、案例要求

选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成
未选择时，默认选中第一个标签页:
选择某一选项后，下方跳出对应游戏的相关介绍内容

实验原理：
1.先设置好选项卡样式，以及所对应的内容
2. 通过z-index来调节下面背景图的显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 800px;
            margin: 0 auto;
            justify-content: center;
            position: relative;
            text-align: center;
        }

        .item .item2 {
            display: flex;
        }

        .top {
            width: 200px;
            height: 50px;
            background-color: rgb(238, 239, 239);
            border: 1px solid rgb(39, 38, 38);
            line-height: 50px;
            cursor: pointer;
        }

        .top:hover {
            background-color: antiquewhite;
        }

        .content {
            width: 798px;
            height: 200px;
            background-color: rgb(228, 227, 227);
            position: absolute;
            top: 51px;
            left: 0;
            line-height: 200px;
            border: 1px solid gray;
        }

        .xianshi {
            z-index: 100;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="item">
        <div class="item2">
            <div class="top xianshi">英雄联盟</div>
            <div class="top">DOTA</div>
            <div class="top">风暴英雄</div>
            <div class="top">300英雄</div>
        </div>

        <div class="content xianshi"><img
                src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Kgz9IqHiPoo9Z6Q_ttNLAQHaEN?pid=ImgDet&rs=1" height="200px"
                width="400px"></div>
        <div class="content">DOTA <img
                src="https://tse1-mm.cn.bing.net/th/id/OIP-C.omCEFerMJnkh2JY0r-dUXQHaEK?pid=ImgDet&rs=1" height="200px"
                width="400px"></div>
        <div class="content">风暴英雄 <img
                src="https://ts1.cn.mm.bing.net/th/id/R-C.d1b1c2acd1df1859828e3367b707637e?rik=g5Xz4gFU%2fUlG6w&riu=http%3a%2f%2fn.sinaimg.cn%2fgames%2fw1680h1050%2f20171214%2fabMd-fypsqiz7583970.jpg&ehk=xztZRkk2%2bcSAKzxxUH0YuuOQeQMXGNztKMbjnCcJmVY%3d&risl=&pid=ImgRaw&r=0"
                height="200px" width="400px"></div>
        <div class="content">300英雄 <img
                src="https://ts1.cn.mm.bing.net/th/id/R-C.b1a802078c94e4ff1f314cc8f571d87a?rik=YpdV0fjGbIZj6w&riu=http%3a%2f%2f300.jumpw.com%2fupload%2f2017%2f5%2f261741534.jpg&ehk=%2fQ3Q43s%2fb8GnYcX8hmYQu0BrChyxgHZ7lK79QgcP4EY%3d&risl=&pid=ImgRaw&r=0"
                height="200px" width="400px"></div>
    </div>

</body>
<script>

    let oitem = document.querySelectorAll(".item .item2 .top")
    let ocon = document.querySelectorAll(".item .content")
    for (let i = 0; i < oitem.length; i++) {
        oitem[i].onclick = function () {
            for (let m = 0; m < oitem.length; m++) {
                oitem[m].classList.remove("xianshi")
                ocon[m].classList.remove("xianshi")
            }
            oitem[i].classList.add("xianshi")
            ocon[i].classList.add("xianshi")
        }
    }
</script>
</html>