Tap选择卡

内容
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>

效果