Tab选项卡

最新推荐文章于 2024-10-07 09:24:46 发布

Sodapease

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量648

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/Sodapease/article/details/128668345

版权

文章展示了如何使用HTML、CSS和JavaScript实现一个选项卡切换功能，内容包括英雄联盟、DOTA、风暴英雄和300英雄四个游戏的介绍。默认选中第一个标签页，点击不同选项会显示相应游戏的详细信息。实现原理主要涉及DOM元素的选择、事件监听以及类名的动态切换。

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

需求

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

实现原理

需求	实现原理
未选择时，默认选中第一个标签页	在css中设置好初始位置样式
未选择时，默认选中第一个标签页
选择某一选项后，下方跳出对应游戏的相关介绍内容	给 li[i] 节点对象创建一个index属性，该属性的值为 i 当鼠标点击事件触发时，获取并调用当前的节点

代码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Tab</title>
	<style>
		*{ 
            margin: 0; 
            padding: 0; 
        }
		#Tab{ 
            width: 600px; 
            border: 1px solid #000; 
            margin: 10px auto; 
        }
		#tab{ 
            width: 100%; 
            display: block; 
            overflow: hidden; 
            background: #364c73; 
        }
		#tab li{ 
            float: left; 
            list-style: none; 
            height: 30px; 
            line-height: 30px;  
        }
		#tab li a{ 
            text-decoration: none; 
            padding: 0 25px;  
            color: #fff; 
        }
		#tab li.sec{ 
            background: #ddd; 
        }
		#tab li.sec a{ 
            color: #364c73; 
            font-weight: bold;
        }
		#txt{ 
            width: 100%; 
            height: 200px; 
            background: #f2f2f2; 
            text-align: center; }
		#txt>div{ 
            display: none; 
            height: 600px; 
        }
		#txt>div.cur{ 
            display: block; 
            text-align: left;
        }
	</style>
</head>
<body>
	<div id="Tab">
		<ul id="tab">
			<li class="sec"><a href="#">英雄联盟</a></li>
			<li><a href="#">Dota</a></li>
			<li><a href="#">风暴英雄</a></li>
			<li><a href="#">300英雄</a></li>
		</ul>
		<div id="txt">
			<div class="cur">《英雄联盟》（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>
        //页面加载后执行函数点击切换
        window.onload = function(){
            const tab = document.getElementById("tab");//声明并获取选项卡头
            const lis = tab.getElementsByTagName("li");//声明并获取选项子节点
            const text = document.getElementById("txt");//声明并获取文字容器
            const con = text.getElementsByTagName("div");//声明并获取文字内容
    
            for (let i = 0; i< lis.length; i++) {//遍历选项卡头所有元素
                lis[i].index = i;//对初始文本内容进行编号
                //给选项卡头元素设置点击事件函数
                lis[i].onclick = function(){
                    for( let i=0; i<lis.length; i++ ){//再次遍历选项卡头所有元素
                        //选项卡头和内容默认
                        lis[i].className = "";
                        con[i].className = "";
                    }
                    //点击后设置为被选中状态
                    this.className = "sec";
                    con[this.index].className = "cur";
                }
             };
        }
        </script>
</body>
</html>