css div tunjukkan hide div

CSS ialah teknologi yang sangat penting dalam reka bentuk dan pembangunan web, dengan memaparkan dan menyembunyikan elemen adalah tugas biasa dalam CSS. Dalam artikel ini, kami akan memperkenalkan cara menggunakan CSS untuk menunjukkan dan menyembunyikan elemen DIV.

Dalam CSS, anda boleh menggunakan atribut paparan untuk mengawal paparan dan penyembunyian elemen. Atribut paparan boleh ditetapkan kepada nilai berikut:

• tiada (sembunyikan elemen)
• sekat (paparkan elemen sebagai elemen blok)
• sebaris ( paparkan elemen sebagai blok sebaris sebaris (elemen paparan sebagai elemen blok sebaris)
• Contoh kod berikut menunjukkan cara menggunakan atribut paparan untuk menyembunyikan dan menunjukkan elemen DIV:

.hide {
  display: none;
}

.show {
  display: block;
}

Kelas .hide dalam contoh menetapkan paparan elemen kepada tiada, yang akan menyebabkan elemen disembunyikan. Sebaliknya, kelas .show menetapkan elemen untuk disekat, yang menyebabkan elemen dipaparkan.

Seterusnya, mari kita lihat cara memaparkan dan menyembunyikan elemen DIV secara dinamik melalui JavaScript.

Pertama, kita boleh menggunakan kaedah getElementById untuk mendapatkan rujukan kepada elemen yang ingin kita tunjukkan atau sembunyikan, dan kemudian tetapkan sifat paparan gaya elemen kepada tiada atau sekat untuk menyembunyikan atau menunjukkannya:

//隐藏元素
var element = document.getElementById("element-id");
element.style.display = "none";

//显示元素
element.style.display = "block";

Walau bagaimanapun, terdapat beberapa kelemahan untuk mengawal keterlihatan elemen secara manual dengan menggunakan JavaScript. Pertama, ia memerlukan kod yang agak verbose dan memerlukan pengendalian keadaan elemen yang jelas, yang menjadikan kod itu sukar untuk dikekalkan. Kedua, dalam tapak web yang besar, menukar gaya elemen halaman secara dinamik boleh menyebabkan prestasi penyemak imbas menurun.

Oleh itu, kita boleh menggunakan kelas pseudo :focus CSS untuk mencapai beberapa paparan elemen dinamik dan kesan penyembunyian. Apabila pengguna mengklik pada elemen, elemen itu boleh mendapatkan fokus dan menggunakan gaya CSS dalam keadaan :focus.

Sebagai contoh, dalam kod di bawah, kami mentakrifkan gaya :fokus untuk elemen yang akan dipaparkan apabila pengguna mengklik pada elemen. Apabila pengguna mengklik pada elemen lain pada halaman di luar fokus, elemen itu akan disembunyikan semula:

.element:focus {
  display: block;
}

.element {
  display: none;
}

Apabila kami menggunakan kelas pseudo :focus, kami tidak perlu menggunakan JavaScript untuk mengurus logik dan boleh melakukannya hanya menggunakan unsur CSS Dynamic hide and show. Ini juga menjadikan kod kami lebih jelas dan lebih mudah untuk diselenggara.

Akhir sekali, terdapat cara untuk mengawal paparan dan penyembunyian elemen menggunakan CSS dan JavaScript, dan ia berdasarkan elemen kotak semak HTML. Apabila kotak semak dipilih, elemen yang berkaitan akan dipaparkan. Jika tidak, elemen itu tersembunyi.

Kunci untuk melaksanakan kaedah ini ialah menggunakan kelas pseudo CSS :checked, yang diaktifkan apabila elemen yang dikaitkan dengan :checked dipilih. Untuk mencapai kesan ini kita perlu menambah beberapa peraturan CSS antara elemen dan kotak semak yang berkaitan.

Kod berikut menunjukkan cara menggunakan kotak pilihan untuk menunjukkan dan menyembunyikan elemen:

<input type="checkbox" id="checkbox-id">
<label for="checkbox-id">显示隐藏元素</label>
<div class="element">隐藏的元素</div>

/* 隐藏元素 */
.element {
  display: none;
}

/* 复选框被选中时显示元素 */
#checkbox-id:checked ~ .element {
  display: block;
}

Dalam contoh ini, kami menggunakan kotak pilihan dan label berkaitan yang pengguna klik Kotak pilihan akan dipilih apabila melabel . Apabila kotak semak dipilih, gaya paparan elemen .element akan ditetapkan untuk menyekat dan elemen akan dipaparkan.

Untuk meringkaskan, dengan menggunakan atribut paparan CSS, kami boleh menunjukkan dan menyembunyikan elemen dalam reka bentuk web. Dalam sesetengah kes, kita boleh menggunakan JavaScript atau kelas pseudo :focus untuk mencapai kesan dinamik dan menggunakan kotak pilihan adalah cara lain untuk mencapai kesan ini. Kita boleh memilih kaedah yang paling sesuai dengan kita berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci css div tunjukkan hide div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!