首頁 > web前端 > css教學 > 如何僅使用 HTML 和 CSS 切換 Div 可見性?

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

Susan Sarandon
發布: 2024-12-05 22:13:12
原創
897 人瀏覽過

How Can I Toggle Div Visibility with HTML and CSS Only?

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

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

使用HTML5 元素

利用 HTML5 標籤 detailsummary,您可以實現可折疊 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板