demo之选项卡

最新推荐文章于 2024-09-10 14:15:01 发布

银色-

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量374

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_72238093/article/details/128656139

版权

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

实现原理：
html部分由两个ul组成，一个是标题，一个是内容介绍
在这里插入图片描述
样式部分

JS部分。先定义两个变量获取头部和内容的li，再通过外层for循环为头部li绑定click事件。内层循环控制active加到点击的li身上

完整代码：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style:none ;
        }
        .header{
            display: flex;
            width: 600px;
        }
        .header li{
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #999;
        }
        .header .active{
            color: red;
            border-bottom: 1px solid green;
        }
        .content .active{
            display: block;
        }
        .content{
            position: relative;
        }
        .content li{
            position: absolute;
            left: 0;
            top: 0;
            width: 600px;
            height: 220px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<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="content">
        <li class="active">《英雄联盟》（League of Legends，简称LOL）是美国拳头游戏开发的一款英雄对战MOBA竞技网游，于2011年9月22日开启国服公测，游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色养成系统，中国内地由腾讯游戏代理运营。

            《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”“英雄联盟全球总决赛”“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化。
            
            2021年12月10日，《英雄联盟》获得2021TGA最佳电竞游戏奖。</li>
        <li>《DOTA》，译作刀塔，是以《魔兽争霸III：冰封王座》为基础制作的自定义地图，也是暴雪公司官方认可的魔兽争霸的RPG地图。

            地图中分为两个对立阵营，玩家通过操作英雄摧毁对方遗迹建筑来获取胜利。这种多人在线竞技模式后来被称为“Dota类游戏“，对之后的许多游戏产生了深远的影响。</li>
        <li>《风暴英雄》是由暴雪娱乐公司开发的一款多人在线竞技游戏，于2015年6月3日正式上线 ，中国大陆由网易公司代理。

            游戏中的英雄角色主要来自于暴雪四大经典游戏系列《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》，玩家需要操控一个英雄，和队友一起，通过控制地图元素、升级、击杀对方英雄来扩大优势并摧毁对方基地以获得胜利。
            
            2022年11月16日，暴雪娱乐发布声明，由于网易的现有授权协议在2023年1月23日到期，暂停在中国大陆的游戏服务。</li>
        <li>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款多人在线战术竞技（MOBA）类网游。

            《300英雄》以7V7组队对抗为主，并有多种娱乐模式供玩家选择。该作创新性地将人气动漫角色融入传统MOBA元素，玩家既可以操作自己喜爱的动漫人物驰骋于战场，同时又享受着MOBA游戏所带来的刺激畅快的游戏体验，在ACG爱好者和MOBA玩家中掀起一股双向热潮。</li>
    </ul>
    <script>
        var headeritem= document.querySelectorAll(".header li")
        var contentitem=document.querySelectorAll(".content li")

        for(var i=0;i<headeritem.length;i++){
            headeritem[i].dataset.index=i;
            headeritem[i].onclick=function(){
                for(var m=0;m<headeritem.length;m++){
                    headeritem[m].classList.remove("active");
                    contentitem[m].classList.remove("active");
                }
                headeritem[this.dataset.index].classList.add("active")
                contentitem[this.dataset.index].classList.add("active")
            }
        }
    </script>
</body>
</html>