Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Togol Keterlihatan Div dengan HTML dan CSS Sahaja?

Bagaimanakah Saya Boleh Togol Keterlihatan Div dengan HTML dan CSS Sahaja?

Susan Sarandon
Susan Sarandonasal
2024-12-05 22:13:12894semak imbas

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

Togol Paparan Div pada Klik Menggunakan HTML dan CSS

Dalam artikel ini, kami berhasrat untuk menyediakan penyelesaian kepada cabaran menunjukkan dan menyembunyikan div pada klik menggunakan teknik HTML dan CSS, tanpa pergantungan pada perpustakaan JavaScript seperti jQuery.

Menggunakan Elemen HTML5

Memanfaatkan teg HTML5 perincian dan ringkasan, anda boleh mencapai div yang boleh runtuh kefungsian tanpa penggayaan atau skrip tambahan. Teg ini menawarkan sokongan asli untuk membuat bahagian yang boleh dilipat:

<details><br> <summary>Runtuhkan 1</summary><br> <p>Content 1...</p><br></details><br><details><br> <summary>Runtuhkan 2</summary><br> <p>Kandungan 2...</p><br></details><br>

CSS tambahan untuk Penggayaan

Sementara pendekatan di atas mengendalikan tingkah laku boleh lipat, anda mungkin ingin meningkatkan penampilan visual anda div. Berikut ialah contoh coretan CSS:

butiran {<br> sempadan: 1px pepejal #ccc;<br> jidar atas: 10px;<br> pelapik: 10px;<br>}<br>ringkasan {<br> latar belakang: #eee;<br> kursor: penunjuk;<br> padding: 5px;<br> paparan: blok;<br>}<br>ringkasan:tuding {<br> latar belakang: #ccc;<br>}<br>

Dengan melaksanakan teknik ini, anda boleh membuat bahagian boleh lipat dalam HTML dan CSS dengan berkesan, tanpa memerlukan jQuery atau perpustakaan JavaScript lain.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Togol Keterlihatan Div dengan HTML dan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn