HTML 在HTML和CSS中点击实现div的显示和隐藏，不使用jQuery

在本文中，我们将介绍如何在HTML和CSS中实现点击显示和隐藏div的效果，而不使用jQuery。通过使用HTML的事件和CSS的选择器，我们可以轻松地实现这个功能。

阅读更多：HTML 教程

使用CSS的:target选择器

CSS的:target选择器用于选中当前URL中的锚点（#）所对应的元素。我们可以利用这个选择器来实现点击显示和隐藏div的效果。

首先，我们需要定义两个div，分别用于显示和隐藏内容。例如：

<div id="showDiv">
  <h2>点击这里显示内容</h2>
  <p>这是要显示的内容。</p>
</div>

<div id="hideDiv">
  <h2>点击这里隐藏内容</h2>
  <p>这是要隐藏的内容。</p>
</div>

然后，我们利用CSS的:target选择器来设置显示和隐藏的样式。例如：

#showDiv:target {
  display: block;
}

#hideDiv:target {
  display: none;
}

在上述样式中，当showDiv被锚点所选中时，显示内容；当hideDiv被锚点所选中时，隐藏内容。

使用HTML的onclick事件

除了使用CSS的:target选择器，我们还可以使用HTML的onclick事件来实现点击显示和隐藏div的效果。通过给元素添加onclick属性，我们可以在点击时触发相应的JavaScript函数。

以下是一个示例：

<div onclick="toggleDiv('showDiv')">
  <h2>点击这里显示内容</h2>
  <p>这是要显示的内容。</p>
</div>

<div onclick="toggleDiv('hideDiv')">
  <h2>点击这里隐藏内容</h2>
  <p>这是要隐藏的内容。</p>
</div>

<div id="showDiv">
  <h2>要显示的内容</h2>
  <p>这是要显示的内容。</p>
</div>

<div id="hideDiv">
  <h2>要隐藏的内容</h2>
  <p>这是要隐藏的内容。</p>
</div>

在上述示例中，我们给两个操作元素添加了onclick事件，分别触发toggleDiv函数，并传入相应的div的id作为参数。toggleDiv函数的实现如下：

function toggleDiv(divId) {
  var div = document.getElementById(divId);
  if (div.style.display === 'none') {
    div.style.display = 'block';
  } else {
    div.style.display = 'none';
  }
}

toggleDiv函数首先通过div的id获取相应的div元素，然后判断其display样式。如果display样式为none，则将其设置为block，使其显示；如果display样式为block，则将其设置为none，使其隐藏。