内容
1.选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成;
2.未选择时,默认选中第一个标签页;
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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.header{
dispLay: flex;
width:500px;
}
.header li {
flex:1;
height: 50px;
line-height: 50px;
text-align: center;
border:1px solid black;
}
.box{
position: relative;
}
.box li{
position: absolute;
left:0;
top:0;
width: 500px;
height: 200px;
background-color:yellow;
display:none;
}
.header .active{
background-color: red;
}
.box .active{
dispLay: block;
}
</style>
</head>
<body>
<ul class="header">
<li class="active">英雄联盟</li>
<li>DOAT</li>
<li>风暴英雄</li>
<li>300英雄</li>
</ul>
<ul class="box">
<li class="active">《英雄联盟》(League of Legends,简称LOL)是由美国拳头游戏(Riot Games)开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄,并拥有排位系统、符文系统等特色系统。</li>
<li>《DotA》(Defense of the Ancients),可以译作守护古树、守护遗迹、远古遗迹守卫, 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图,可支持10个人同时连线游戏,是暴雪公司官方认可的魔兽争霸的RPG地图。</li>
<li>《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
游戏中的英雄角色主要来自于暴雪四大经典游戏系列:《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏,与《星际争霸Ⅱ》基于同一引擎开发。
2022年11月17日,上海网之易网络科技发展有限公司发布公告称,由于公司与合作方暴雪娱乐的协议期限即将届满,在中国大陆地区由公司所运营的《风暴英雄》,将于2023年1月24日0时终止运营。</li>
<li>《300英雄》是由上海跳跃网络科技有限公司自主研发,深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主,提供永恒战场和永恒竞技场两种经典模式任由玩家选择,并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。</li>
</ul>
<script>
var oHeaderItems = document.querySelectorAll(".header li")
var oBoxItems = document.querySelectorAll(".box li")
for(var i=0; i<oHeaderItems.length; i++){
oHeaderItems[i].dataset.index = i
oHeaderItems[i].onclick = handler
}
function handler(){
var index = this.dataset.index
for(var m=0;m<oHeaderItems.length; m++){
oHeaderItems[m].classList.remove("active")
oBoxItems[m].classList.remove("active")
}
oHeaderItems[index].classList.add("active")
oBoxItems[index].classList.add ("active")
}
</script>
</body>
</html>
效果