如何僅使用 HTML 和 CSS 切換 Div 可見性？

使用HTML 和CSS 在點擊時切換Divs 顯示

在本文中，我們的目標是提供一個解決方案來應對以下挑戰：使用HTML 和CSS 技術在點擊時顯示和隱藏div，而不依賴JavaScript 庫，例如jQuery.

使用HTML5 元素

利用 HTML5 標籤 detail 和 summary，您可以實現可折疊 div無需額外的樣式或腳本即可實現功能。這些標籤為建立可折疊部分提供本機支援：

<details><br> <summary>Collapse 1</summary><br> <p>Content 1...</p>
<br>詳細資料><br><br> 折疊2摘要><br> <p>內容2...</p>
<br></details><br>

用於樣式的附加CSS

同時上述方法處理可折疊行為，您可能想要增強div 的視覺外觀。以下是一個 CSS 程式碼片段範例：

details {<br> border: 1pxsolid #ccc;<br> margin-top: 10px;<br> padding: 10px;<br>;<br>摘要{<br>背景：#eee;<br>遊標：指標;<br> 填充：5px;<br> 顯示：區塊;<br>}<br>摘要：懸停{<br> 背景：# ccc;<br>}<br>

透過實作這些技術，您可以有效地在 HTML 和 CSS 中建立可折疊部分，而不需要 jQuery 或其他 JavaScript圖書館。

以上是如何僅使用 HTML 和 CSS 切換 Div 可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！