游戏选项卡切换界面实现-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128650456

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

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    .header {
        display: flex;
        width: 600px;
        text-align: center;
        justify-content: space-between;
    }

    li {
        height: 80px;
        line-height: 80px;

        width: 150px;
    }

    .header .active {
        color: white;
        background-color: red;
    }

    .box {
        position: relative;
    }

    .box li {
        position: absolute;
        left: 0;
        top: 0;
        width: 600px;
        height: 320px;
        display: none;

    }

    .box .active {
        display: block;
        color: white;
    }

    .box li:nth-child(1) {
        background-size: cover;
        background: url(./英雄联盟.png);
    }

    .box li:nth-child(2) {
        background-size: cover;
        background: url(./DOTA.png);
    }

    .box li:nth-child(3) {
        background-size: cover;
        background: url(./风暴英雄.png);
    }

    .box li:nth-child(4) {
        background-size: cover;
        background: url(./300英雄.png);
    }
</style>

<body>
    <ul class="header">
        <li class="active" id="item1">英雄联盟</li>
        <li id="item2">DOTA</li>
        <li id="item3">风暴英雄</li>
        <li id="item4">300英雄</li>
    </ul>
    <ul class="box">
        <li class="active">《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot
            Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
            《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”、“英雄联盟全球总决赛”、“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化
            [1] </li>
        <li>在暴雪DOTA游戏中，每支队伍都要伴随电脑控制的单位不断冲击对方主基地，但游戏并不是简单的你来我往。同时主基地也由几座威力非常强大的防御塔自行守护，拥有着毁灭性的力量。想要摧毁敌方主基地并夺取胜利，就必须要拿下这几座防御塔。
        </li>
        <li>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
            游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。</li>
        <li>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。
            [1]
        </li>
    </ul>



    <script>
        var oHeaderItems = document.querySelectorAll(".header li")
        var oBoxItems = document.querySelectorAll(".box li")
        for (var i = 0; i < oHeaderItems.length; i++) {

            oHeaderItems[i].dataset.index = i

            oHeaderItems[i].onclick = function () {
                var index = this.dataset.index
                for (m = 0; m < oHeaderItems.length; m++) {
                    oHeaderItems[m].classList.remove("active")
                    oBoxItems[m].classList.remove("active")
                }

                oHeaderItems[index].classList.add("active")
                oBoxItems[index].classList.add("active")

            }
        }

    </script>
</body>

</html>

思路：
首先设定css样式
讲四个选项卡的表现形式都设定为none，将需要表现出来的设定为active
然后通过query获取全部内容
接着需要绑定事件，通过自定义属性dataset在每一次循环的时候附上一个属性，最后通过属性的值来修改对象中每一个内容
active思路：
鼠标点击时间时给他附上active的选择器，并且删除其他的所有的选择器
因为导航与内容的序号是匹配的，所以就完成了
在这里插入图片描述

TAB选项卡