JS实现下拉框

最新推荐文章于 2022-07-06 10:10:14 发布

郭郭郭憨憨

最新推荐文章于 2022-07-06 10:10:14 发布

阅读量3.2k

点赞数 3

文章标签：大数据

本文链接：https://blog.csdn.net/qq_59494319/article/details/125450002

版权

代码展示：

<!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>