Tab选项卡

最新推荐文章于 2024-06-14 15:02:13 发布

Smulll_

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量616

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_74155781/article/details/128667917

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

考核二-任务六-Tab选项卡

需求
html代码
css代码
JavaScript代码
样式截图
实现原理

需求

在这里插入图片描述

html代码

<body>
    <div class="container">
    <ul class="tabs">
        <li class="tab active">
            英雄联盟
        </li>
        <li class="tab"> 
            DOTA
        </li>
        <li class="tab">
            风暴英雄
        </li>
        <li class="tab">
            300英雄
        </li>
    </ul>
        <div class="content-box">
            <div class="content active" >
                <p>
                    《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
                </p>

                <p>
                    《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”、“英雄联盟全球总决赛”、“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化 。
                </p>

                <p>
                    2018年5月14日，《英雄联盟》加入“亚洲运动会”，成为表演项目之一。2021年11月5日，《英雄联盟》入选为第19届“亚洲运动会”电竞比赛项目，这是电竞首次成为亚运会的正式竞赛项目，向全世界展现电竞运动的魅力，项目所获得的奖牌将计入国家奖牌榜  。
                </p>

                <p>
                    2019年9月17日，拳头游戏值《英雄联盟》十周年之际发布了其全新的LOGO，并公布每一天全世界都有超过八百万玩家同时在线，这意味着英雄联盟依然是全球玩家数最大的电脑游戏 。

                </p>

                <p>
                    2023年1月9日，据《英雄联盟》开发人员消息，《英雄联盟》将在 13.2 版本开始测试新的“15 投”规则，4/5 赞成票即可通过；《英雄联盟》 13.1 版本预计将在 2023 年 1 月 13 日上线，届时将推出《英雄联盟》无限乱斗模式。13.2 版预计将在 1 月 26 日上线。
                </p>
            </div>
            <div class="content">
                <p>《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</p>
                    <p>最早的DOTA地图则在混乱之治时代就出现了，一位叫做Eul（Euls）的玩家制作了第一张DOTA地图《RoC DOTA》，其中两队都只有总共5个英雄，非常简单 [1]  。</p>
                        <p>Eul（Euls）退出之后有位玩家Steve Guinsoo整合了很多个英雄制作了DotA Allstars。在2005年，6.01版发布不久，IceFrog同Neichus对地图进行了多次修正和更新。之后Neichus退出，IceFrog成为主要的地图程序员，负责包括游戏的执行和平衡的测试在内的任何工作。随着6系列版本不断被发布，bug的修正，新的英雄和新增加的法术不断被引入《DotA》。</p>
                            <p>最终游戏分为两个阵营，玩家需要操作英雄，通过摧毁对方遗迹建筑来获取最终胜利。这种多人在线竞技模式后来被称为“Dota类游戏“，对之后的许多游戏产生了深远的影响。</p>
            </div>
            <div class="content">
                <p>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。</p>
                <p>游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。</p>
                    <p>2022年11月17日，上海网之易网络科技发展有限公司发布公告称，由于公司与合作方暴雪娱乐的协议期限即将届满，在中国大陆地区由公司所运营的《风暴英雄》，将于2023年1月24日0时终止运营。</p>
            </div>
            <div class="content">
                <p>300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。 [1] </p>
            </div>
        </div>
    </div>
</body>

css代码

*{
    padding: 0;
    margin: 0;
}
.tabs{
    list-style: none;
    display: block;
    height: 50px;
    width: 500px;
    margin: 0 auto;
    display: flex;
    border-bottom: 1px solid black;
    cursor: pointer;
}
a{
    text-decoration: none;
    list-style: none;
}
.container{
    background-color: aqua;
    width: 800px;
    margin: 0 auto;
}
.tab{
    float: left;
    margin: 0 15px;
    line-height: 50px;
    text-align: center;
    flex:1;
}
.tab.active{
    background-color: crimson;
    color: wheat;
}
.content-box .content{
    display: none;
}
.content-box .content.active{
    display:block ;
}
.content{
    width: 800px;
    height: 300px;
    margin: 0 auto;
    margin-top: 20px;
    text-indent:2em;
}

JavaScript代码

let tabs = document.querySelectorAll('.tab')
let contents = document.querySelectorAll('.content')


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