JS实现点击一个按钮隐藏和显示div

原创已于 2024-10-17 16:27:49 修改 · 置顶 · 1.4w 阅读

66 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2018-10-03 19:45:24 首次发布

前端知识同时被 2 个专栏收录

49 篇文章

订阅专栏

HTML

17 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，通过JavaScript实现按钮点击控制DIV元素的显示与隐藏效果。页面包括一个按钮和一个初始隐藏的DIV，点击按钮切换DIV的可见状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网页开发中，控制某些元素的显示和隐藏是非常常见的需求。以下是一个使用JavaScript实现点击按钮来显示或隐藏一个div元素的示例：

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

代码详解

HTML部分
- 使用了<input type="button">来创建一个按钮，点击该按钮会调用JavaScript函数toggleDiv()来控制div元素的显示和隐藏。
- <div id="div1">是需要显示或隐藏的元素，通过点击按钮来实现。
CSS部分
- 给div1设置了基本的样式，比如宽度、高度和背景色。
- 初始状态下，将div1的display属性设置为none，即默认隐藏。
JavaScript部分
- toggleDiv()函数获取了按钮和div元素的引用，通过document.getElementById()获取。
- 通过检查div1的display属性来判断当前的显示状态，如果是none，则将其设置为block，同时更改按钮的value以反映当前操作。

进一步优化

过渡动画

为了让div显示和隐藏的过程更加平滑，可以在CSS中加入过渡效果：

#div1 {
  width: 200px;
  height: 50px;
  background: #ccc;
  display: none;
  transition: opacity 0.5s ease;
  opacity: 0;
}
#div1.show {
  display: block;
  opacity: 1;
}

在JavaScript中，通过添加或移除类名来实现过渡效果：

function toggleDiv() {
  var button = document.getElementById("bt");
  var div = document.getElementById("div1");
  if (div.classList.contains("show")) {
    div.classList.remove("show");
    button.value = "显示模块";
  } else {
    div.classList.add("show");
    button.value = "隐藏模块";
  }
}

用户体验改进
- 可以通过改变按钮的文字或颜色，来让用户更清楚当前的操作。例如，使用不同的背景色来提示用户“隐藏”或“显示”的操作。
- 还可以加入一些语义化提示，例如在按钮中加入aria-expanded属性来帮助屏幕阅读器用户理解当前的div状态。

总结

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

按钮点击前后的效果图：

用户体验改进

可以通过改变按钮的文字或颜色，来让用户更清楚当前的操作。例如，使用不同的背景色来提示用户“隐藏”或“显示”的操作。
还可以加入一些语义化提示，例如在按钮中加入aria-expanded属性来帮助屏幕阅读器用户理解当前的div状态。

新增案例：实现点击按钮动态加载内容

在实际开发中，我们可能需要通过点击按钮来动态加载内容，而不是仅仅显示或隐藏已经存在的元素。以下是一个使用JavaScript实现点击按钮后动态加载内容的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>点击按钮动态加载内容</title>
  <style type="text/css">
    body {
      padding: 100px;
    }
    #content {
      width: 300px;
      height: auto;
      background: #e0e0e0;
      padding: 20px;
      margin-top: 20px;
      display: none;
    }
  </style>
  <script type="text/javascript">
    function loadContent() {
      var button = document.getElementById("loadBtn");
      var content = document.getElementById("content");
      if (content.style.display === "none") {
        content.innerHTML = "<h3>动态加载的内容</h3><p>这是通过点击按钮动态加载的内容。</p>";
        content.style.display = "block";
        button.value = "隐藏内容";
      } else {
        content.style.display = "none";
        button.value = "加载内容";
      }
    }
  </script>
</head>
<body>
  <input type="button" id="loadBtn" value="加载内容" onclick="loadContent()" />
  <div id="content"></div>
</body>
</html>

代码详解

HTML部分
- 使用<input type="button">创建了一个按钮，点击按钮会调用JavaScript函数loadContent()来动态加载或隐藏内容。
- <div id="content">是内容容器，初始状态设置为隐藏，通过点击按钮来显示并加载内容。
JavaScript部分
- loadContent()函数用于控制内容的加载和显示。
- 首次点击按钮时，向div中动态添加HTML内容，并将其显示出来；再次点击时，隐藏内容。