使用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。