Bagaimanakah Saya Boleh Menyembunyikan dan Menunjukkan Kandungan dalam CSS Tanpa Menggunakan JavaScript?

Sembunyikan dan Tunjukkan Kandungan dengan CSS, Tiada JavaScript Diperlukan

Dalam mengejar UI yang bersih dan cekap, adalah penting untuk mempunyai keupayaan untuk menyembunyikan dan menunjukkan kandungan. Secara tradisinya, JavaScript telah menjadi penyelesaian terbaik untuk tugas ini. Walau bagaimanapun, menggunakan CSS menawarkan alternatif yang lebih ringkas dan lebih berprestasi.

Percubaan Awal

Satu pendekatan yang mungkin menggunakan CSS ialah menggunakan kelas pseudo ':focus'. Mari kita periksa coretan CSS asal yang disediakan:

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

Masalah yang Dihadapi

Walaupun pendekatan ini berjaya menyembunyikan kandungan apabila pautan 'Sembunyikan' diklik, ia juga membenarkan kandungan yang hendak disembunyikan dengan mengklik mana-mana sahaja pada halaman. Tingkah laku ini tidak diingini, kerana ia mengurangkan kefungsian yang dimaksudkan bagi pautan 'Sembunyikan'.

Penyelesaian Diperbaiki

Untuk menangani isu ini, kami memperkenalkan struktur CSS yang diubah suai sedikit :

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

Fungsi

Dalam penyelesaian yang dipertingkatkan ini, kelas pseudo ':focus' digunakan pada dua elemen, '.span3' dan '.span2 ', yang mewakili pautan 'Sembunyikan' dan 'Tunjukkan' masing-masing. Apabila pautan 'Sembunyikan' ('.span3') mendapat fokus, ia menyembunyikan elemen dengan kelas '.alert', yang mengandungi kandungan tersembunyi. Sebaliknya, apabila pautan 'Tunjukkan' ('.span2') mendapat fokus, ia memaparkan elemen '.alert'.

Kelebihan

Pendekatan ini menawarkan beberapa faedah :

• Tiada JavaScript Diperlukan: Ia bergantung sepenuhnya pada CSS, menjadikannya lebih mudah untuk dilaksanakan dan diselenggara.
• Disembunyikan Sasaran: The kandungan hanya disembunyikan apabila pautan 'Sembunyikan' diklik, menghalang penyembunyian yang tidak diingini daripada interaksi halaman lain.
• Perubahan Minimum: Ia hanya memerlukan pengubahsuaian kecil pada CSS asal, mengekalkan tingkah laku yang dimaksudkan .

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