Bagaimanakah Saya Boleh Memaparkan dan Menyembunyikan Elemen atas Permintaan Hanya Menggunakan CSS?

Paparkan dan Sembunyikan Elemen atas Permintaan dengan CSS

Menavigasi kandungan web seharusnya menjadi pengalaman yang mudah, tanpa mengira tetapan penyemak imbas atau had peranti. Dalam kes di mana JavaScript tidak tersedia, memastikan kebolehaksesan adalah penting.

Pertimbangkan senario dengan menu dan berbilang div tersembunyi. Pemilihan pengguna harus mencetuskan kemunculan div tertentu. Walaupun JavaScript menawarkan penyelesaian yang ideal, ia tidak lagi berfungsi apabila dilumpuhkan.

CSS to the Rescue

Untuk mengatasi cabaran ini, CSS membantu kami. "Godam kotak semak" memanfaatkan kuasa kotak pilihan dan pemilih pseudo yang serba boleh :checked.

Cara Ia Berfungsi

Pada mulanya, kotak pilihan dan berbilang div dicipta. Kotak pilihan diberikan tiga gaya:

1. Tersembunyi: Kotak semak disembunyikan secara visual dengan paparan: tiada.
2. Tidak dipilih: The div yang berkaitan kekal tersembunyi dengan paparan: tiada.
3. Dipilih: Div yang dikaitkan dengan kotak semak yang ditandakan dipaparkan dengan paparan: inline-block.

Pelaksanaan

Dalam HTML, buat elemen kotak semak dan elemen label yang sepadan dengan setiap label yang dikaitkan dengan yang unik div.

<input type="checkbox">

Dalam CSS, tentukan gaya untuk kotak pilihan dan label:

/* Hide checkbox visually */
input[type="checkbox"] {
  display: none;
}

/* Use label for checkbox to provide visual accessibility */
label {
  display: inline-block;
  cursor: pointer;
}

/* Hide divs initially */
div {
  display: none;
}

/* Show div when associated checkbox is checked */
input[type="checkbox"]:checked ~ div {
  display: inline-block;
}

Kesimpulan

Dengan CSS ini- penyelesaian berasaskan, div boleh dipaparkan atau disembunyikan dengan lancar pada klik, walaupun dengan JavaScript dilumpuhkan, memastikan pengguna boleh diakses secara universal pengalaman.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan dan Menyembunyikan Elemen atas Permintaan Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!