使用 CSS 隐藏和显示内容：无需 JavaScript 的技巧

在进行 Web 开发时，控制内容的可见性通常至关重要。传统上，这是使用 JavaScript 实现的，但 CSS 也可用于创建优雅的隐藏和显示效果。下面描述了一种此类技术，解决了先前方法遇到的特定挑战。

隐藏/显示内容切换：

可以使用 CSS 创建内容切换，允许用户隐藏和显示项目列表。以下代码片段演示了此功能：

#cont {
  display: none;
}
.show:focus   .hide {
  display: inline;
}
.show:focus   .hide   #cont {
  display: block;
}

挑战：

虽然上述CSS达到了预期的效果，但它面临着一个缺点。显示内容时，只需单击页面上的任意位置即可将其隐藏。这种行为是不可取的，因为我们只想在单击“隐藏”链接时隐藏内容。

解决方案：

要解决此问题，请执行以下操作修改后的 CSS 和 HTML 代码可以使用：

CSS:

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}

HTML:

Hide Me
Show Me
Some alarming information here

通过这些更改，只有在单击“隐藏我”span 元素时才会隐藏警报消息。该方案有效解决了该问题，提供了一种基于CSS的隐藏和显示内容的方法，无需依赖JavaScript。