demo6

2024-06-06 10:06:24 前端知识 前端哥 766 195 我要收藏

demo6

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

思路:
1.首先构造导航栏,再用定位的方式使四个元素的介绍页面处在同一位置
2.将第一个元素的li标签背景颜色改为选中颜色状态,并将它的介绍页面的堆叠顺序级变大
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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            flex-direction: column;
            position: relative;
        }
        #header{
            width: 1200px;
            height:50px;
            background-color:greenyellow;
            margin: 0 auto;
        }
        li{
            width: 300px;
            height: 50px;
            text-align: center;
            list-style-type: none;
            line-height: 50px;
           
        }
        li:nth-child(1){
            background-color: #ff6700;
        }
        #list{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        #content{
            margin: 0 auto;
            width: 1200px;
            height: 500px;

        }
        
        .con{
            margin: 0 auto;
            width: 1200px;
            height: 500px;
            background-color: blanchedalmond;
            position: absolute;
            top: 50px;
            left: 254.333px;
            z-index: 1;
        }
        #content div:nth-child(1){
            z-index: 2;
        }
        h2{
            font-size: 30px;
        }
        p{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="header">
        <ul id="list">
            <li>英雄联盟</li>
            <li>DOTA</li>
            <li>风暴英雄</li>
            <li>300英雄</li>
        </ul>
    </div>
    <div id="content">
    <div class="con">
        <h2>英雄联盟</h2>
        <p>《英雄联盟》(League of Legends,简称LOL)是由美国拳头游戏(Riot Games)开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄,并拥有排位系统、符文系统等特色系统。
            《英雄联盟》致力于推动全球电子竞技的发展,除了联动各赛区发展职业联赛、打造电竞体系之外,每年还会举办“英雄联盟季中冠军赛”、“英雄联盟全球总决赛”、“英雄联盟全明星赛”三大世界级赛事,形成了自己独有的电子竞技文化 [1]  。
            2018年5月14日,《英雄联盟》加入“亚洲运动会”,成为表演项目之一 [85]  。2021年11月5日,《英雄联盟》入选为第19届“亚洲运动会”电竞比赛项目,这是电竞首次成为亚运会的正式竞赛项目,向全世界展现电竞运动的魅力,项目所获得的奖牌将计入国家奖牌榜 [99]  。
            2019年9月17日,拳头游戏值《英雄联盟》十周年之际发布了其全新的LOGO,并公布每一天全世界都有超过八百万玩家同时在线,这意味着英雄联盟依然是全球玩家数最大的电脑游戏 [84]  。
            2023年1月9日,据《英雄联盟》开发人员消息,《英雄联盟》将在 13.2 版本开始测试新的“15 投”规则,4/5 赞成票即可通过;《英雄联盟》 13.1 版本预计将在 2023 年 1 月 13 日上线,届时将推出《英雄联盟》无限乱斗模式。13.2 版预计将在 1 月 26 日上线。 [152] </p>
    </div>
    
    <div class="con">
        <h2>DOTA</h2>
        <p>《DotA》(Defense of the Ancients),可以译作守护古树、守护遗迹、远古遗迹守卫, 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图,可支持10个人同时连线游戏,是暴雪公司官方认可的魔兽争霸的RPG地图。
            最早的DOTA地图则在混乱之治时代就出现了,一位叫做Eul(Euls)的玩家制作了第一张DOTA地图《RoC DOTA》,其中两队都只有总共5个英雄,非常简单 [1]  。
            Eul(Euls)退出之后有位玩家Steve Guinsoo整合了很多个英雄制作了DotA Allstars。在2005年,6.01版发布不久,IceFrog同Neichus对地图进行了多次修正和更新。之后Neichus退出,IceFrog成为主要的地图程序员,负责包括游戏的执行和平衡的测试在内的任何工作。随着6系列版本不断被发布,bug的修正,新的英雄和新增加的法术不断被引入《DotA》。
            最终游戏分为两个阵营,玩家需要操作英雄,通过摧毁对方遗迹建筑来获取最终胜利。这种多人在线竞技模式后来被称为“Dota类游戏“,对之后的许多游戏产生了深远的影响。</p>
    </div>
    <div class="con">
        <h2>风暴英雄</h2>
        <p>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
            游戏中的英雄角色主要来自于暴雪四大经典游戏系列:《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏,与《星际争霸Ⅱ》基于同一引擎开发。
            2022年11月17日,上海网之易网络科技发展有限公司发布公告称,由于公司与合作方暴雪娱乐的协议期限即将届满,在中国大陆地区由公司所运营的《风暴英雄》,将于2023年1月24日0时终止运营。 [17] </p>
    </div>
    <div class="con">
        <h2>300英雄</h2>
        <p>《300英雄》是由上海跳跃网络科技有限公司自主研发,深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主,提供永恒战场和永恒竞技场两种经典模式任由玩家选择,并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。</p>
    </div>
</div>
    <script>
        var oli=document.getElementsByTagName("li");
        var list=document.getElementById("list");
        var conarr=document.getElementsByClassName("con");
        for(let i=0;i<oli.length;i++){
            oli[i].onclick=function(){
                for(let j=0;j<oli.length;j++){
                    oli[j].style.backgroundColor="greenyellow";
                    conarr[j].style.zIndex=1;
                }
                oli[i].style.backgroundColor="#ff6700";
                conarr[i].style.zIndex=3;
            }
            
        }
    </script>
</body>
</html>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11041.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!