效果要求：

1.选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成；

实现原理：

给介绍内容的块设置 z-index 改变其的显示层级

通过按钮点击切换

代码展示：

html

<!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><link rel="stylesheet" href="./index.css">
</head>
<body><div class="container"><ul class="title"><li class="sty">英雄联盟</li><li>DOTA</li><li>风暴英雄</li><li>300英雄</li></ul><div class="div styMain"><h1>英雄联盟</h1><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="div"><h1>DOTA</h1><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="div"><h1>风暴英雄</h1><p>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。2022年11月17日，上海网之易网络科技发展有限公司发布公告称，由于公司与合作方暴雪娱乐的协议期限即将届满，在中国大陆地区由公司所运营的《风暴英雄》，将于2023年1月24日0时终止运营。 [17] </p></div><div class="div"><h1>300英雄</h1><p>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。 [1] </p></div></div><script src="./index.js"></script>
</body>
</html>

css

*{margin: 0;padding: 0;list-style: none;text-decoration: none;
}.container{width: 1200px;height: 600px;margin: 0 auto;margin-top: 20px;
}.title{width: 1200px;height: 50px;
}.title li{float: left;width: 300px;height: 50px;box-sizing: border-box;text-align: center;line-height: 50px;background-color: rgb(146, 142, 142);color: white;
}.title .sty{background-color: white;color: black;border: 2px solid rgb(47, 138, 49);
}.div{width: 1200px;height: 550px;position: absolute;
}.styMain{z-index: 1;background-color: rgb(134, 45, 45);
}

js

// 获取元素节点
var title = document.getElementsByClassName("title")[0]
var liSty = title.getElementsByTagName("li")
var div = document.getElementsByClassName("div")for (let i = 0; i < liSty.length; i++) {// 为每个li绑定单击响应函数liSty[i].onclick = function () {// 清除所有li的sty类for (var j = 0; j < liSty.length; j++) {liSty[j].classList.remove("sty")}// 为点击的li添加上sty类liSty[i].classList.add("sty")// 清除所有div的styMain类for (var j = 0; j < div.length; j++) {div[j].classList.remove("styMain")}// 为点击的li相对应的div添加上styMain类div[i].classList.add("styMain")}
}

效果展示：

tab选项

JavaScript 实现tab介绍相关推荐

java怎么实现tab切换_[Java教程]用javascript实现tab切换
[Java教程]用javascript实现tab切换 0 2016-09-12 14:00:10 html代码: 111111 222222 333333 css代码:.active{ backgro ...
JavaScript prototype 使用介绍
JavaScript prototype 使用介绍用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属 ...
JavaScript匿名函数介绍
JavaScript匿名函数介绍匿名函数顾名思义指的是没有名字的函数,在实际开发中使用的频率非常高. JavaScript匿名函数最常见的用法: (function(){ //运行的代码 })(); ...
小白上路之javascript数组的介绍
逆战班-- 关于数组,应该是javaScript的一个很重要的知识点,毕竟js来源有数组嘛(开个玩笑),那什么是数组呢? 数组可以说是对象的另外一种表现形式,数组中的特点就是存在于数组中的数据是有顺序 ...
JavaScript函数详细介绍
一.函数介绍函数就是将实现特定功能的代码封装起来,当我们需要实现特定功能时,直接调用函数实现即可,不需要每次都写一堆代码,实现代码的复用. 函数的作用: 1.实现功能的封装,提高代码复用率 2.用于 ...
Javascript之KO介绍
KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...
html js异步绑定,JavaScript异步机制介绍
异步就是代码执行的顺序,并不是按照从上到下的顺序一次性执行,而是在不同的时间段执行,一部分代码在"未来执行".本文就来为大家介绍一下JavaScript中的异步机制. 单线程异步执 ...
JavaScript实现tab效果图
图片地址:http://download.csdn.net/detail/richard_jason/9669782 效果图: 示例代码: <!DOCTYPE html PUBLIC " ...
Web基础 HTML和CSS介绍和基本使用及语法，JavaScript和jQuery介绍和基本使用及语法
WEB 什么是WEB互联网上的一种应用程序-->网页典型的应用:C/SClient:客户端Server:服务器B/SB: Browser :浏览器S: Server :服务器WEB的组成 &am ...

JavaScript 实现tab介绍

效果要求：

实现原理：

代码展示：

html

css

js

效果展示：

JavaScript 实现tab介绍相关推荐

最新文章

热门文章