Tab选项卡

最新推荐文章于 2024-07-08 16:22:29 发布

最后一首练习曲

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量416

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/linglingpractice/article/details/128641577

版权

需求：

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

效果展示

在这里插入图片描述

实现原理

通过给li标签绑定上click事件，使标签页被点击时触发active属性

具体代码如下

<!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>Tab选项卡</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .container {
        width: 1200px;
        height: 600px;
        margin: 100px auto;
        border:2px solid #d0d1d4;
    }
    .nav {
        height: 44px;
        border: 1px solid #d0d1d4;
        background-color: #f0f0f0;
    }
    .nav li {
        color: black;
        height: 44px;
        line-height: 44px;
        text-align: center;
        float: left;
        padding: 0 20px;
    }
    .nav .active {
        background-color: #4d638d;
        color: #fff;
    }
    .text {
        padding: 20px;
        position: relative;
    }
    .text li{
        position: absolute;
        left: 20;
        top: 30;
        line-height: 30px;
        width: 1170px;
        height: 540px;
        display: none;
    }
    .text .active{
        display: none;
        display: block;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav">
            <ul>
                <li class="active">英雄联盟</li>
                <li>DOTA</li>
                <li>风暴英雄</li>
                <li>300英雄</li>
            </ul>
        </div>
        <ul class="text">
            <li class="active">
                &nbsp&nbsp&nbsp&nbsp&nbsp《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”,“英雄联盟全球总决赛”,“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp2018年5月14日，《英雄联盟》加入“亚洲运动会”，成为表演项目之一 [85]  。2021年11月5日，《英雄联盟》入选为第19届“亚洲运动会”电竞比赛项目，这是电竞首次成为亚运会的正式竞赛项目，向全世界展现电竞运动的魅力，项目所获得的奖牌将计入国家奖牌榜
            </li>
            <li>
                &nbsp&nbsp&nbsp&nbsp&nbsp《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp最早的DOTA地图则在混乱之治时代就出现了，一位叫做Eul（Euls）的玩家制作了第一张DOTA地图《RoC DOTA》，其中两队都只有总共5个英雄，非常简单。<br>
                &nbsp&nbsp&nbsp&nbsp&nbspEul（Euls）退出之后有位玩家Steve Guinsoo整合了很多个英雄制作了DotA Allstars。在2005年，6.01版发布不久，IceFrog同Neichus对地图进行了多次修正和更新。之后Neichus退出，IceFrog成为主要的地图程序员，负责包括游戏的执行和平衡的测试在内的任何工作。随着6系列版本不断被发布，bug的修正，新的英雄和新增加的法术不断被引入《DotA》。<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp最终游戏分为两个阵营，玩家需要操作英雄，通过摧毁对方遗迹建筑来获取最终胜利。这种多人在线竞技模式后来被称为“Dota类游戏“，对之后的许多游戏产生了深远的影响。
            </li>
            <li>&nbsp&nbsp&nbsp&nbsp&nbsp《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp 游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp2022年11月17日，上海网之易网络科技发展有限公司发布公告称，由于公司与合作方暴雪娱乐的协议期限即将届满，在中国大陆地区由公司所运营的《风暴英雄》，将于2023年1月24日0时终止运营。</li>
            <li>&nbsp&nbsp&nbsp&nbsp&nbsp《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。</li>
        </ul>
    </div>
    <script>
        // 首先获取元素
        var oHeaderItenms = document.querySelectorAll(".nav li")
        var oTextItenms = document.querySelectorAll(".text li")
       //给每一个li标签上绑定click事件
        for(var i=0;i<oHeaderItenms.length;i++){
        //添加自定义属性，先赋值
            oHeaderItenms[i].dataset.index = i
            oHeaderItenms[i].onclick = handler
        }
        function handler(){
            var index = this.dataset.index
            for(var m=0;m<oHeaderItenms.length;m++){
                //使只有被点到的标签触发active
                oHeaderItenms[m].classList.remove("active")
                oTextItenms[m].classList.remove("active")
            }//使没有被点到的标签取消active
            oHeaderItenms[index].classList.add("active")
            oTextItenms[index].classList.add("active")
        }
    </script>
</body>
</html>