<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击一个按钮隐藏和显示div</title>
		<style type="text/css">
			body {
				padding: 100px;
			}

			#div1 {
				width: 200px;
				height: 50px;
				background: #ccc;
				display: none;
			}
		</style>
		<script type="text/javascript">
			function xx() {
				var obt = document.getElementById("bt");
				var odiv = document.getElementById("div1");

				if (odiv.style.display == "none") {
					odiv.style.display = "block";
					obt.value = "隐藏模块";
				} else {
					odiv.style.display = "none";
					obt.value = "显示模块";
				}

			}
		</script>
	<body>
		<input type="button" id="bt" value="显示模块" onclick="xx()" />
		<div id="div1"></div>
	</body>
</html>

使用唯一标识ID来控制元素的显示或者隐藏：

按钮点击前后的效果图：

 

 

 

# javascript # 前端 # html
Logo
华为云开发者联盟

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

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟