JS选项卡如何制作

最新推荐文章于 2024-05-31 10:26:40 发布

茶卡盐佑星_

最新推荐文章于 2024-05-31 10:26:40 发布

阅读量366

点赞数 14

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/hexadecimal_001/article/details/137247569

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			button {
				width: 50px;
				height: 50px;
			}

			.but {
				width: 200px;
				height: 80px;
				margin: auto;
			}

			#china {
				width: 500px;
				height: 300px;
				background-color: aquamarine;
				margin: auto;
				text-align: center;
			}

			#math {
				width: 500px;
				height: 300px;
				background-color: chocolate;
				margin: auto;
				text-align: center;
				display: none;
			}

			#english1 {
				width: 500px;
				height: 300px;
				background-color: cornflowerblue;
				margin: auto;
				text-align: center;
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="but">
			<button class="meau-one" onclick="fun1()"> 菜单一</button>
			<button class="meau-two" onclick="fun2()"> 菜单二</button>
			<button class="meau-three" onclick="fun4()"> 菜单三</button>
		</div>
		<div id="china">
			语文
		</div>
		<div id="math">
			数学
		</div>
		<div id="english1">
			英语
		</div>

	</body>
	<script>
		let on1 = document.getElementById("china");
		let on2 = document.getElementById("math");
		let on3 = document.getElementById("english1");

		function fun1() {
			on1.style.display = 'block';
			on2.style.display = 'none';
			on3.style.display = 'none';

		}
		function fun2() {
			on1.style.display = 'none';
			on3.style.display = 'none';
			on2.style.display = 'block';
		}
		function fun4() {
			on1.style.display = 'none';
			on2.style.display = 'none';
			on3.style.display = 'block';
		}
	</script>
</html>

上面所述是实现JS选项卡的一种方式，如果大家有其他方法，欢迎评论区讨论。