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!