a标签点击将div隐藏(div标签隐藏与显示)

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

a标签的点击事件可以通过JavaScript来实现，通过改变div标签的样式来隐藏或显示。我们可以使用onclick属性来定义a标签的点击事件，然后在JavaScript函数中使用style属性来改变div标签的display属性。

我们需要给a标签添加一个onclick属性，当点击a标签时，会触发该属性对应的JavaScript函数。在JavaScript函数中，我们可以通过getElementById方法获取到div标签的引用，然后使用style属性来改变其display属性。

示例代码如下所示：


<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 200px;
  height: 200px;
  background-color: red;
  display: block;
}
</style>
</head>
<body>
<a href="#" onclick="toggleDiv()">点击隐藏/显示div</a>
<div id="myDiv"></div>
<script>
function toggleDiv() {
  var div = document.getElementById("myDiv");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}
</script>
</body>
</html>

在上面的示例中，我们首先定义了一个div标签，其初始状态为显示。然后，我们定义了一个a标签，并给其添加了一个onclick属性，该属性的值为toggleDiv()，表示点击a标签时会调用toggleDiv函数。

在toggleDiv函数中，我们首先通过getElementById方法获取到id为"myDiv"的div标签的引用，然后通过style属性来改变其display属性。如果div标签的display属性为"none"，则将其改为"block"，即显示div；如果display属性为"block"，则将其改为"none"，即隐藏div。

通过这样的方式，我们可以通过点击a标签来隐藏或显示div标签。

除了使用display属性来隐藏或显示div标签，我们还可以使用visibility属性。当div标签的visibility属性为"hidden"时，div标签会被隐藏，但仍占用页面布局空间；当visibility属性为"visible"时，div标签会显示出来。

示例代码如下所示：


<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 200px;
  height: 200px;
  background-color: red;
  visibility: visible;
}
</style>
</head>
<body>
<a href="#" onclick="toggleDiv()">点击隐藏/显示div</a>
<div id="myDiv"></div>
<script>
function toggleDiv() {
  var div = document.getElementById("myDiv");
  if (div.style.visibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}
</script>
</body>
</html>

在上面的示例中，我们同样定义了一个div标签和一个a标签，并给a标签添加了一个onclick属性，该属性的值为toggleDiv()，表示点击a标签时会调用toggleDiv函数。

在toggleDiv函数中，我们同样通过getElementById方法获取到id为"myDiv"的div标签的引用，然后通过style属性来改变其visibility属性。如果div标签的visibility属性为"hidden"，则将其改为"visible"，即显示div；如果visibility属性为"visible"，则将其改为"hidden"，即隐藏div。

通过这样的方式，我们同样可以通过点击a标签来隐藏或显示div标签，但不会改变页面的布局。

我们可以通过a标签的点击事件来隐藏或显示div标签，通过改变div标签的display属性或visibility属性来实现。我们可以根据具体的需求来选择使用哪种方式来隐藏或显示div标签。

a标签点击将div隐藏(div标签隐藏与显示)

相关阅读