Tab选项卡-CSDN博客

本文链接：https://blog.csdn.net/black_tea114514/article/details/128718288

该代码示例展示了如何使用HTML、CSS和JavaScript创建一个包含英雄联盟、DOTA、风暴英雄和300英雄四个选项卡的游戏介绍页面。点击选项卡会切换显示相应游戏的简介内容，初始默认选中第一个标签页。通过修改元素的class实现视觉效果的变化。

摘要由CSDN通过智能技术生成

要求：

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

原理：

选中选项时，清除class名，把第一个标签页的class名字赋给他
数组遍历后，给每个数据赋值，用于改变class

代码：

	<style>
		*{ 
            margin: 0; 
            padding: 0; 
            list-style: none; 
        }
		#box{ 
            width: 600px; 
            border: 1px solid #000; 
            margin: 10px auto; 
        }
		#tab{ 
            width: 100%; 
            display: block; 
            overflow: hidden; 
            background-color: rgb(238, 234, 229); 
        }
		#tab li{ 
            float: left; 
            height: 30px; 
            line-height: 30px;  
            width: 25%;
            text-align: center;
        }
		#tab li.tab_lol{ 
            background: wheat; 
        }
		#tab li.tab_lol{ 
            color: black; 
            font-weight: bold;
        }
		#text{ 
            width: 100%; 
            height: 200px; 
            background: #f2f2f2; 
            text-align: center; 
            position: relative;
        }
		#text div{ 
            position: absolute;
            top: 20px; 
        }
		#text .lol{ 
            text-align: left;
            background-color: white;
            height: 178px;
            z-index: 1;
        }
	</style>
</head>
<body>
	<div id="box">
		<ul id="tab">
			<li class="tab_lol">英雄联盟</li>
			<li>Dota</li>
			<li>风暴英雄</li>
			<li>300英雄</li>
		</ul>
		<div id="text">
			<div class="lol">
                《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、
				中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
				《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”、
				“英雄联盟全球总决赛”、“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化。
            </div>
			<div>
                《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、
                自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
                最早的DOTA地图则在混乱之治时代就出现了，一位叫做Eul（Euls）的玩家制作了第一张DOTA地图《RoC DOTA》，其中两队都只有总共5个英雄，非常简单
            </div>
			<div>
                《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
                游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和
                《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。
            </div>
			<div>
                《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，
                提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。
            </div>
		</div>
	</div>
    <script>
            var tab = document.getElementById("tab");
            var tabLi = tab.getElementsByTagName("li");
            var text = document.getElementById("text");
            var textObj = text.getElementsByTagName("div");
            for (var i = 0; i< tabLi.length; i++) {
                tabLi[i].index = i;
                tabLi[i].onclick = function(){
                    for( var i=0; i<tabLi.length; i++ ){
                        tabLi[i].className = "";
                        textObj[i].className = "";
                    }
                    this.className = "tab_lol";
                    textObj[this.index].className = "lol";
                }
             }
    </script>
</body>

视频：

QQ视频20230117155901