Tab选项卡

要求:

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

实现原理

  1. 用相对定位,让四个介绍页面固定在一起,先让其隐藏。给第一个块和对应的标签一个display:block。为默认选中状态。
  2. 设置自定义属性,控制选择目标。被点击后,所有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>Documenttitle>
    <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">DOTAdiv>
            <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>

Tab选项卡视频

你可能感兴趣的:(js,前端,html,javascript)