Bagaimanakah Saya Boleh Menyembunyikan dan Menunjukkan Kandungan dengan CSS Tanpa JavaScript?

Menyembunyikan dan Menunjukkan Kandungan dengan CSS: Helah Tanpa JavaScript

Apabila bekerja dengan pembangunan web, mengawal keterlihatan kandungan selalunya penting. Secara tradisinya, ini dicapai menggunakan JavaScript, tetapi CSS juga boleh digunakan untuk mencipta kesan bersembunyi dan menunjukkan kesan yang elegan. Satu teknik sedemikian diterangkan di bawah, menangani cabaran khusus yang dihadapi dengan pendekatan sebelumnya.

Sembunyikan/Tunjukkan Togol Kandungan:

Seseorang boleh menggunakan CSS untuk mencipta togol kandungan yang membolehkan pengguna menyembunyikan dan menunjukkan senarai item. Coretan berikut menunjukkan kefungsian ini:

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

Cabaran:

Walaupun CSS di atas mencapai kesan yang diingini, ia menghadapi kelemahan. Apabila kandungan dipaparkan, ia boleh disembunyikan dengan hanya mengklik mana-mana sahaja pada halaman. Tingkah laku ini tidak diingini, kerana kami hanya mahu kandungan disembunyikan apabila pautan "Sembunyikan" diklik.

Penyelesaian:

Untuk menangani isu ini, perkara berikut CSS dan kod HTML yang disemak boleh digunakan:

CSS:

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

HTML:

<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 perubahan ini, mesej makluman hanya akan disembunyikan apabila elemen rentang "Sembunyikan Saya" diklik. Penyelesaian ini menyelesaikan masalah dengan berkesan dan menyediakan kaedah berasaskan CSS untuk menyembunyikan dan menunjukkan kandungan tanpa bergantung pada JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan dan Menunjukkan Kandungan dengan CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!