原生JavaScript选项卡-优快云博客

本文链接：https://blog.youkuaiyun.com/dongdongaa0/article/details/112230485

本文介绍了一个简单的HTML页面，该页面使用纯CSS样式和JavaScript实现了一个基本的Tab切换效果。通过点击不同的菜单项，用户可以看到相应的内容面板。此示例适用于初学者理解基本的DOM操作和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul,li{list-style: none;}
		.box{
			width:300px;
			height:300px;
			border:1px solid red;
			margin: 10px auto;
			position: relative;
		}
		.tab li{
			float:left;
			width:98px;
			border:1px solid yellowgreen;
			height:35px;
			text-align: center;
			line-height: 35px;
			background-color: greenyellow;
			cursor:pointer;	
		}
		
		.tablist{
			position: absolute;
			left:0;
			top:37px;
			width:100%;
			height:263px;
			font-size: 60px;
			text-align: center;
			display: none;
		}
		
		.hot{
			color:#fff;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="tab">
			<li class="hot">菜单一</li>
			<li>菜单二</li>
			<li>菜单三</li>
		</ul>
		<div class="tablist" style="background-color: pink;">一</div>
		<div class="tablist" style="background-color: aqua;">二</div>
		<div class="tablist" style="background-color: deepskyblue;">三</div>
	</div>
	<script>
		var li=document.getElementsByTagName("li");
		
		var list=document.getElementsByClassName("tablist");
		
		list[0].style.display="block"
		
		
		for(var i=0;i<li.length;i++){
			//保存下标
			li[i].index=i;
			li[i].onclick=function(){
				for(j=0;j<li.length;j++){
					li[j].className="";
					list[j].style.display="none";
				}
				list[this.index].style.display="block";
				this.className="hot";
			}
		}
		
		</script>
</body>
</html>