点击不同按钮切换不同div

最新推荐文章于 2024-04-11 05:37:43 发布

摸个小鱼hh

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量3.6k

点赞数 6

分类专栏：基础知识

本文链接：https://blog.csdn.net/hy1255564202/article/details/109776610

版权

基础知识专栏收录该内容

8 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			button{
				
				float: left;
			}
			div{
				position: absolute;
				top: 40px;
				width: 100px;
				height: 100px;
				
				border: 1px solid red;
				float: left;
			}
			#div1{
				background-color: darkgray;
				
			}
			#div2{
				background-color: darksalmon;
			
			}
			#div3{
				background-color: darkseagreen;
				
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="showDiv('div1')">btn1</button>
		<button type="button" onclick="showDiv('div2')">btn2</button>
		<button type="button" onclick="showDiv('div3')">btn3</button>
		
		
		
		<div id="div1">
			
		</div>
		<div id="div2">
			
		</div>
		<div id="div3">
			
		</div>
		<script type="text/javascript">
			let divs=document.querySelectorAll('div');
			let showDiv=(str)=>{
				for(let div of divs){
					div.style.display="none";
				}
				document.getElementById(str).style.display = "block";
			}
			
			
		</script>
	</body>
</html>