代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 100px;
				height: 0px;
				overflow: hidden;
				background-color: aqua;
				transition: all 0.5s;
			}

			button {
				display: block;
				width: 100px;
				font-size: 20px;
			}

			.change {
				height: 100px;
			}
		</style>
	</head>
	<body>
		<button>菜单栏1</button>
		<div>内容1</div>
		<button>菜单栏2</button>
		<div>内容2</div>
		<button>菜单栏3</button>
		<div>内容3</div>
		<script>
			var btns = document.querySelectorAll("button");
			var contents = document.getElementsByTagName("div");
			for (var i = 0; i < btns.length; i++) {
				btns[i].onclick = function() {
					//获取点击下标
					var index = -1;
					for (var j = 0; j < contents.length; j++) {
						if (btns[j] == this) {
							index = j;
							break;
						}
					}
					for (var k = 0; k < contents.length; k++) {
						k==index?contents[k].classList.toggle("change"):contents[k].classList.remove("change");
					}
				}
			}
		</script>
	</body>
</html>

结果展示：

 

 

# 大数据
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟