如何在不使用 JavaScript 的情况下隐藏和显示 CSS 内容？

使用 CSS 隐藏和显示内容，无需 JavaScript

为了追求干净高效的 UI，必须拥有隐藏和显示内容的能力。传统上，JavaScript 一直是此任务的首选解决方案。然而，使用 CSS 提供了一种更简单、性能更高的替代方案。

初始尝试

使用 CSS 的一种可能方法是使用 ':focus' 伪类。让我们检查一下提供的原始 CSS 片段：

<code class="css">#cont {
  display: none;
}
.show:focus + .hide {
  display: inline;
}
.show:focus + .hide + #cont {
  display: block;
}</code>

遇到的问题

虽然此方法在单击“隐藏”链接时成功隐藏了内容，但它还允许单击页面上任意位置即可隐藏内容。这种行为是不可取的，因为它削弱了“隐藏”链接的预期功能。

改进的解决方案

为了解决此问题，我们引入了稍微修改的 CSS 结构:

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

功能

在此改进的解决方案中，':focus' 伪类应用于两个元素，'.span3' 和 '.span2 '，分别代表“隐藏”和“显示”链接。当“隐藏”链接（“.span3”）获得焦点时，它会隐藏类“.alert”的元素，其中包含隐藏内容。相反，当“显示”链接（“.span2”）获得焦点时，它会显示“.alert”元素。

优点

这种方法有几个好处:

• 不需要 JavaScript：它完全依赖于 CSS，使其更容易实现和维护。
• 有针对性的隐藏：仅当单击“隐藏”链接时，内容才会隐藏，从而防止其他页面交互时意外隐藏。
• 最小更改： 只需对原始 CSS 进行少量修改，保留预期行为.

以上是如何在不使用 JavaScript 的情况下隐藏和显示 CSS 内容？的详细内容。更多信息请关注PHP中文网其他相关文章！