如何在不使用 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中文網其他相關文章！