Rumah > Artikel > hujung hadapan web > Bagaimana untuk Menyembunyikan/Menunjukkan Kandungan dengan CSS Sahaja dan Mencegah Penyembunyian Tidak Sengaja?
Sembunyikan/Tunjukkan Senarai Kandungan dengan CSS Sahaja
Masalah:
Cara untuk menyembunyikan /tunjukkan kandungan hanya menggunakan CSS tanpa JavaScript, sambil memastikan kandungan hanya disembunyikan dengan mengklik butang "Sembunyikan" dan bukan dengan mengklik mana-mana pada halaman.
Penyelesaian Awal:
Kod HTML dan CSS yang disediakan membenarkan menyembunyikan dan menunjukkan kandungan, tetapi kandungan itu boleh disembunyikan dengan mengklik mana-mana sahaja pada halaman.
Penyelesaian:
Kepada selesaikan isu ini, gunakan CSS yang diubah suai berikut:
<code class="css">body { display: block; } .span3:focus ~ .alert { display: none; } .span2:focus ~ .alert { display: block; } .alert { display: none; }</code>
Dan kemas kini struktur HTML dengan sewajarnya:
<code class="html"><span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert">Some alarming information here</p></code>
Cara Ia Berfungsi:
Penyelesaian ini menggunakan pemilih ~ (adik-beradik) dalam CSS untuk menyasarkan elemen yang merupakan adik-beradik elemen yang difokuskan. Apabila butang "Sembunyikan Saya" difokuskan, ia menetapkan elemen .alert bersebelahan untuk dipaparkan: tiada;, menyembunyikan kandungan. Sebaliknya, apabila butang "Tunjukkan Saya" difokuskan, ia menetapkan elemen .alert bersebelahan untuk dipaparkan: blok;, menunjukkan kandungan.
Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan/Menunjukkan Kandungan dengan CSS Sahaja dan Mencegah Penyembunyian Tidak Sengaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!