更简单的js选项卡，这是我写的哈哈_jsjdjsdjskssjssjsjsskskssksskskwvgj,这个我想-CSDN博客

本文链接：https://blog.csdn.net/weixin_46388469/article/details/104962404

上图
上码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡2</title>
		<style type="text/css">
			div{
				cursor: pointer;
			}
			.selection{
				width: 300px;
				height: 300px;
				margin: 200px auto;
			}
			#nav1{
				width: 100px;
				height: 100px;
				background-color: yellow;
				float: left;
			}
			#nav2{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			#nav3{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			#concent1{
				width: 100%;
				height: 200px;
				float: left;
				background-color: yellow;
			}
			#concent2{
				width: 100%;
				height: 200px;
				float: left;
				background-color: red;
				display: none;
			}
			#concent3{
				width: 100%;
				height: 200px;
				float: left;
				background-color: blue;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="selection">
			<div id="nav1"></div>
			<div id="nav2"></div>
			<div id="nav3"></div>
			<div style="clear: both;"></div>
			<div id="concent1"></div>
			<div id="concent2"></div>
			<div id="concent3"></div>
		</div>
		
		<script type="text/javascript">
			
			var nav1 = document.getElementById("nav1");
			var nav2 = document.getElementById("nav2");
			var nav3 = document.getElementById("nav3");
			var concent1 = document.getElementById("concent1");
			var concent2 = document.getElementById("concent2");
			var concent3 = document.getElementById("concent3");
			
			
			
			
			nav2.onclick = function(){
				concent2.style.display = "block";
				concent3.style.display = "none";
				concent1.style.display = "none";
			}
			nav3.onclick = function(){
				concent3.style.display = "block";
				concent2.style.display = "none";
				concent1.style.display = "none";
			}
			nav1.onclick = function(){
				concent1.style.display = "block";
				concent3.style.display = "none";
				concent2.style.display = "none";
			}
		</script>

	</body>
</html>