css点击显示div隐藏

今天我来分享一下如何使用CSS实现点击显示或隐藏DIV。

首先，我们需要用CSS定义一个DIV的样式，然后通过JavaScript编写一个函数来切换这个DIV的可见性。下面是代码：

<style>
  
  .hidden {
  
   
   display: none;
  
}
</style>
<script>
  
  function toggleDivVisibility(divId) {
  
   
   var div = document.getElementById(divId);
  
   
   if (div.style.display == 'none') {
  
   
   
   
 div.style.display = 'block';
  
   
}
 else {
  
   
   
   
 div.style.display = 'none';
  
   
}
  
}
</script> 

这个代码定义了一个名为“hidden”的CSS类，它将一个元素的显示方式设置为“none”，这样这个元素就会被隐藏。接着，它定义了一个名为“toggleDivVisibility”的JavaScript函数，这个函数接受一个DIV的ID作为参数。当我们调用这个函数时，它会获取这个ID对应的DIV元素，然后检查这个元素的当前显示方式是不是“none”。如果是，它就将其显示方式修改为“block”，这样这个DIV元素就会显示出来；如果不是，就将其显示方式重新设置为“none”，这样这个DIV元素就会被隐藏起来。

最后，我们在HTML中添加一个包含按钮的容器DIV，并将其点击事件绑定到我们刚才写的JavaScript函数上，以此来控制我们希望显示还是隐藏的DIV元素。代码如下：

<div onclick="toggleDivVisibility('myDiv')">
  
  <button>点击显示/隐藏</button>
</div>
<div id="myDiv" class="hidden">
  
  <p>这是要显示或隐藏的内容。</p>
</div> 

这段代码创建了一个包含“点击显示/隐藏”按钮的DIV容器，它的点击事件被绑定到了我们刚才写的JavaScript函数上。接下来，我们创建了一个名为“myDiv”的DIV元素，并将其初始样式设置为“hidden”，这样它一开始就会被隐藏起来。最后，在这个DIV元素中添加了一些我们想要显示或隐藏的内容。

这样，当我们点击“点击显示/隐藏”按钮时，就会调用我们的JavaScript函数来控制我们希望显示还是隐藏的DIV元素。这种实现方法虽然比较基础，但在很多简单的实际应用中是非常有用的。