前端js——tab选项卡切换模板、例子（点击标签显示对应内容）_点击一个标签它相对应的内容会出现在下边js-优快云博客

本文介绍了一个简单的网页Tab切换效果的实现方法，包括页面布局、样式设置及交互逻辑。通过CSS和JavaScript实现标签页的切换，并展示对应内容的显示与隐藏。

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

效果

在这里插入图片描述

1.页面布局

分别设置五个标签，给五个标签写序号，移到标签上获取标签序号显示对应的div
1）设置一个整个的div包含所有的标签和所有内容
2）标签

        <ul>
			<li style="background: blanchedalmond;">快餐</li>
			<li style="background: burlywood;">面食</li>
			<li style="background: cyan;">甜点</li>
		</ul>

3）内容

        <div class="main" style="background: blanchedalmond;"></div>
		<div class="main" style="background: burlywood;"></div>
		<div class="main" style="background: cyan;"></div>

2.页面样式

1）设置整个tab的大小边框

#tab{
				width: 400px;
				height: 300px;
				border: blue 1px solid;
				margin: 30px auto;
			}

2）标签浮动\清除标签原点

#tab ul li{
				float: left;
				width: 133px;
				height: 30px;
				list-style: none;
				text-align: center;
				line-height: 30px;
			}

3）设置内容部分,加绝对定位避免出现三个内容框，设置内容部分隐藏

.main{
				width: 390px;
				height: 250px;
				margin-left: 5px;
				margin-top: 40px;
				display: none;
				position: absolute;
			}

3.给标签加移入事件，实现tab切换

1）获取id进行定义
2）利用循环给li分别加序号

for(var i=0;i<list.length;i++){ 
       list[i].xuhao=i;
       }

3）鼠标移入事件：获取li的序号，显示对应序号的div

list[i].onmouseover=function(){
                    var c=this.xuhao;
                    cn[c].style.display="block"
            	}

4)保证tab可以循环使用,每执行一次都先让其他都隐藏在显示对应的

for(var i=0;i<3;i++){
                    	cn[i].style.display="none";
                    }

4.源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#tab{
				width: 400px;
				height: 300px;
				border: blue 1px solid;
				margin: 30px auto;
			}
			/*标签浮动\清除原点*/
			#tab ul li{
				float: left;
				width: 133px;
				height: 30px;
				list-style: none;
				text-align: center;
				line-height: 30px;
			}
			/*设置内容部分,加绝对定位避免出现三个内容框*/
			.main{
				width: 390px;
				height: 250px;
				margin-left: 5px;
				margin-top: 40px;
				display: none;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="tab">
		<!--标签-->
		<ul>
			<li style="background: blanchedalmond;">快餐</li>
			<li style="background: burlywood;">面食</li>
			<li style="background: cyan;">甜点</li>
		</ul>
		<!--内容-->
		<div class="main" style="background: blanchedalmond;display: block;"></div>
		<div class="main" style="background: burlywood;"></div>
		<div class="main" style="background: cyan;"></div>
		</div>
		<script>
			var tab=document.getElementById("tab");
			var list=tab.getElementsByTagName("li");
			var cn=tab.getElementsByClassName("main");
			
//			加序号
            for(var i=0;i<list.length;i++){
            	list[i].xuhao=i;
//          	鼠标移入事件
            	list[i].onmouseover=function(){
//          		获得当前移入的li序号
                    var c=this.xuhao;
                    for(var i=0;i<3;i++){
                    	cn[i].style.display="none";
                    }
//                  对应序号的内容显示
                    cn[c].style.display="block"
            	}
            }
		</script>
	</body>
</html>