tab切换 js代码方法实现

最新推荐文章于 2024-09-22 14:11:19 发布

S_1978P1

最新推荐文章于 2024-09-22 14:11:19 发布

阅读量1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/S_1978P1/article/details/82348120

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript实现简单的Tab切换效果，通过实例代码详细解析了点击不同按钮时显示相应内容的逻辑，帮助读者掌握JavaScript在前端交互设计中的应用。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab切换</title>
		<style type="text/css">
/*			table tr td{
				width: 200px;
				height: 20px;
				background-color: aqua;
				color: brown;
				text-align: center;
			}*/
			
			#box{
				width: 600px;
				/*box-sizing:border-box;*/
				border: 1px solid #000;
				background-color: #999;
				
			}
			#header{
				width: 600px;
			}
			.d1,.d2,.d3{
				width: 600px;
				height: 300px;
				background-color: burlywood;
				text-align: center;
				line-height: 300px;
				display: none;
				
			}	
			.d2{
				background-color: coral;
			}
			.d3{	
				background-color: deepskyblue;
			}
			#header input{
			box-sizing:border-box;
				width: 196px;
				height: 100px;
				margin: 0;
					
			}
			
		</style>
	</head>
	<body>
		
			<!--<table>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</table>-->
			
			
			
			<div id="box">
			
			
				<!--创建几个按钮，放入一个div中-->
				<div id="header">
					<input type="button" value="1" id="i1"/>
					<input type="button" value="2" id="i2"/>
					<input type="button" value="3" id="i3"/>
				</div>
				
				
				<!--创建需要切换的内容，将其放入一个大div中-->
				<div id="content">
					<div class="d1" style="display: block;">内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一</div>
					<div class="d2" style="display: none;">内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二</div>
					<div class="d3" style="display: none;">内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三</div>
				</div>
			</div>
		
		
		
		<script type="text/javascript">
		
//		分别获取到按钮的div以及内容的大div
			var content = document.getElementById("content");
			var header= document.getElementById("header")
			
//			分别获取到按钮div中的内容以及内容大div中的内容
			var odiv = content.getElementsByTagName("div")
			var oli = header.getElementsByTagName("input")
			
			
//			循环,遍历出每一个按钮
			for(var i=0;i<oli.length;i++){
				oli[i].index=i			//创建按钮索引
				oli[i].onclick = function(){			//每一个按钮点击事件的方法
//					循环,遍历出每一个需要显示内容的div，让他循环影藏，以免点击事件发生后，下次点击时，上一次点击显示出来的div不隐藏
					for(var i=0;i<oli.length;i++){
					
						odiv[i].style.display="none";	
					}
//					将对应的索引绑定到一起,点击对应的按钮,对应的内容div就会显示
					 odiv[this.index].style.display="block"
					
				}
			}



//var tdd =document.getElementsByTagName("td")
//var divv = document.getElementsByTagName("div")
//for(var i = 0; i<td.length;i++){
//			tdd[i].onclick = function(){
//				divv[i].style.display = "block"
//			}
//}


		</script>
	</body>
</html>