Tab选项卡

最新推荐文章于 2023-08-10 18:55:59 发布

时不久留

最新推荐文章于 2023-08-10 18:55:59 发布

阅读量728

点赞数

分类专栏：小案例文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_73104281/article/details/128649146

版权

小案例专栏收录该内容

17 篇文章 0 订阅

订阅专栏

要求：

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

实现原理

用相对定位，让四个介绍页面固定在一起，先让其隐藏。给第一个块和对应的标签一个display：block。为默认选中状态。
设置自定义属性，控制选择目标。被点击后，所有active（选中状态）清空，让当前目标得到active属性。

<!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>
        .box{
            width: 800px;
            margin: 0 auto; 
            justify-content: center;
            position: relative;
            text-align: center;
        }
        .box .box2{
            display: flex;
        }
        .card{
            width: 200px;
            height: 50px;
            background-color: rgb(238, 239, 239);
            border: 1px solid rgb(39, 38, 38);
            line-height: 50px;
        }
        
        
        .content{
            width: 798px;
            height: 200px;
            background-color: rgb(228, 227, 227);
            position: absolute;
            top: 51px;
            left: 0;
            display: none;
            line-height: 200px;
            border: 1px solid gray;
        }
        .active{
            display: block;
            color: rgb(22, 100, 168);
            font-size: 20px;
            background-color: rgb(219, 219, 219);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box2">
            <div class="card active" >英雄联盟</div>
            <div class="card">DOTA</div>
            <div class="card">风暴英雄</div>
            <div class="card">300英雄</div>
        </div>
        
        <div class="content active">英雄联盟介绍</div>
        <div class="content">DOTA介绍</div>
        <div class="content">风暴英雄介绍</div>
        <div class="content">300英雄介绍</div>
    </div>
    
</body>
<script>
    let ocard=document.querySelectorAll(".box .box2 .card")
    let ocon=document.querySelectorAll(".box .content")
    for(let i=0;i<ocard.length;i++){
        ocard[i].dataset.env=i
        //遍历，创建一个自定义类名 env="i"
        ocard[i].onclick=function(){
            //绑定点击事件
            let env=this.dataset.env
            //获取这个属性
            for(let m=0;m<ocard.length;m++){
                //直接全部清空
                ocard[m].classList.remove("active")
                ocon[m].classList.remove("active")
            }
            ocard[env].classList.add("active")
            ocon[env].classList.add("active")
            //被点击时，添加active属性
        }
        
    }
</script>
</html>