Cara Mencegah Kandungan Tidak Diinginkan Bersembunyi dalam CSS: Penyelesaian untuk Masalah \':focus\'.

Sembunyikan/Tunjukkan Senarai Kandungan dengan CSS: Menyelesaikan Gelagat Yang Tidak Diingini

Dalam usaha mencari penyelesaian untuk menyembunyikan dan menunjukkan kandungan hanya menggunakan CSS, pembangun menghadapi masalah: kandungan boleh disembunyikan dengan mengklik di mana-mana pada halaman, bukannya hanya dengan mengklik pautan "sembunyikan" yang ditetapkan.

Kod awal pembangun menggunakan CSS berikut:

<code class="css">#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}</code>

Kod ini berjaya menyembunyikan kandungan apabila pautan "sembunyikan" diklik. Walau bagaimanapun, ia juga membolehkan penyembunyian dengan mengklik mana-mana bahagian halaman, kerana peraturan CSS menyasarkan kelas pseudo ":focus".

Untuk menyelesaikan isu ini, kami boleh menggunakan CSS dikemas kini berikut:

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}</code>

Dalam kod yang dikemas kini ini, kami menggunakan penggabung "~" untuk menyasarkan elemen yang merupakan adik-beradik elemen yang difokuskan. Ini bermakna elemen "sembunyikan" (~ .alert) hanya disembunyikan apabila elemen "tunjukkan" berada dalam fokus.

HTML tetap sama:

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p></code>

Dengan semakan ini pendekatan, kandungan kini hanya disembunyikan apabila elemen "Sembunyikan Saya" diklik, seperti yang dimaksudkan oleh pembangun.

Atas ialah kandungan terperinci Cara Mencegah Kandungan Tidak Diinginkan Bersembunyi dalam CSS: Penyelesaian untuk Masalah \':focus\'.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!