tab选项卡

三池丶

已于 2023-01-13 00:07:32 修改

阅读量177

点赞数

文章标签： css html 前端

于 2023-01-12 23:31:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_72343101/article/details/128667861

版权

这是一个展示MOBA游戏分类的网页布局示例，使用HTML、CSS和JavaScript实现。页面包含四个游戏类别：英雄联盟、DOTA、风暴英雄和300英雄，每个类别有对应的背景图片。当用户点击类别时，会显示相应的内容介绍，内容区域采用绝对定位并有动态显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>MOBA游戏分类</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            display: flex;
            width: 100%
        }
        .item{
            width: 24.75%;
            height: 130px;
            text-align: center;
            line-height: 130px;
            font-size: 20px;
            font-family: 'SimSun';
            border: 4px solid seashell;
            color: whitesmoke;
            cursor: pointer;
        }
        .one{
            background-image: url(./图片/英雄联盟.jpg);
            background-size: cover;
        }
        .two{
            background-image: url(./图片/dota1.jpg);
            background-size: cover;
            font-family: 'Courier New', Courier, monospace;
        }
        .three{
            background-image: url(./图片/风暴英雄.jpg);
            background-size: cover;
        }
        .four{
            background-image: url(./图片/300英雄.jpg);
            background-size: cover;
        }
        #box .active{
            border: 4px solid burlywood;
        }
        #content{
            position: relative;
        }
        .item1{
            width: 100%;
            height: 3300px;
            background-color: rgb(2, 2, 30);
            position: absolute;
            display: none;
        }
        .item2{
            width: 100%;
            height: 3300px;
            background-color: darkred;
            position: absolute;
            display: none;
        }
        .item3{
            width: 100%;
            height: 3300px;
            background-color: rgb(2, 2, 92);
            position: absolute;
            display: none;
        }
        .item4{
            width: 100%;
            height: 3300px;
            background-color: saddlebrown;
            position: absolute;
            display: none;
        }
        #content .active{
            display: block;
            color: white;
        }
        .container{
            width: 1200px;
            margin: 0 auto;
            height: 3170px;
            background-color: darkgray;
            display: flex;
        }
        .c3{
            height: 2800px;
        }
        .c4{
            height: 2660px;
        }
        .text-1{
            width: 70%;
            border: 1px solid darkgray;
        }
        .text-1 div{
            margin-left: 20px;
            margin-top: 40px;
        }
        .text-1 h1{
            display: inline-block;
        }
        .text-1 h2{
            margin-top: 20px;
        }
        .text-1 h3{
            font-weight: normal;
            color: bisque;
        }

        .text-2{
            width: 30%;
            border: 1px solid darkgray;
        }
        .text-2 div{
            width:310px ;
            height: 210px;
            margin: 0 auto;
            margin-top: 60px;
            background-color: rgb(2, 2, 30);
            text-align: center;
        }
        .text-2 .ol{
            height: 220px;
        }
        .text-2 img{
            width: 310px;
        }
        .text-2 h3{
            font-weight: normal;
            font-size: 16px;
        }
        .c2 div{
            height: 300px;
        }
        .c5 div{
            height: 185px;
        }
        .c6 div{
            height: 340px;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li class="item one active">英雄联盟</li>
        <li class="item two">DOTA</li>
        <li class="item three">风暴英雄</li>
        <li class="item four">300英雄</li>
    </ul>
    <ul id="content">//这部分文本太长，没写上去，等会视频可以看到
    	<li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var oBox=document.querySelector("#box")//获取选项菜单
        var oItem=document.querySelectorAll("#box li")//获取菜单内的选项，给后续的点击事件做铺垫
        var oContent=document.querySelector('#content')//绑定内容容器
        var oItem1=document.querySelectorAll('#content li')//绑定内容
        for(var i=0;i<oItem.length;i++){//给每个选项都加上点击按钮
            oItem[i].dataset.index=i
            oItem[i].onclick=handler
            // console.log(oItem[i])
        }
        function handler(){
            var index=this.dataset.index//通过设置自定义属性值（index）来控制点击时的内容切换
            for(var n=0;n<oItem.length;n++){//通过for循环来清除每一个选项的active属性。
                oItem[n].classList.remove("active")
                oItem1[n].classList.remove("active")
            }
            //然后再通过添加自定义属性来让点击的选项和内容被选中，由于index的的值与被选中的选项所组成的为数组相同，所以，可以进行选项和内容一起切换。
            oItem[index].classList.add("active")
            oItem1[index].classList.add("active")
        }
    </script>
    </body>
</html>

MOBA游戏分类 - Google Chrome