如何在不使用 JavaScript 的情況下使用 CSS 隱藏和顯示內容？

使用CSS 隱藏和顯示內容：無需JavaScript 的技巧

在進行Web 開發時，控制內容的可見性通常至關重要。傳統上，這是使用 JavaScript 實現的，但 CSS 也可用於創建優雅的隱藏和顯示效果。下面描述了一種這樣的技術，解決了先前方法遇到的特定挑戰。

隱藏/顯示內容切換：

可以使用 CSS 建立一個內容切換，讓使用者隱藏並顯示項目清單。以下程式碼片段示範了這個功能：

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

挑戰：

雖然上述 CSS 實現了所需的效果，但它面臨著一個缺點。顯示內容時，只需單擊頁面上的任意位置即可將其隱藏。這種行為是不可取的，因為我們只想在點擊「隱藏」連結時隱藏內容。

解決方案：

要解決此問題，請執行以下操作可以使用修改後的CSS 和HTML 程式碼：

CSS :

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

HTML:

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

與這些更改後，僅當單擊“隱藏我”跨度元素時，警報消息才跨度元素時，警報消息才跨度元素會隱藏。該方案有效解決了該問題，提供了一種基於 CSS 的方法來隱藏和顯示內容，而不依賴 JavaScript。

以上是如何在不使用 JavaScript 的情況下使用 CSS 隱藏和顯示內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！