css tunjukkan hide div

CSS memainkan peranan penting dalam reka bentuk web. Ia bukan sahaja boleh mencantikkan halaman web, tetapi juga mencapai beberapa kesan interaksi pengguna. Artikel ini akan menerangkan cara menggunakan CSS untuk menunjukkan dan menyembunyikan div.

1. Gunakan atribut paparan untuk memaparkan dan menyembunyikan div

Atribut paparan digunakan untuk menentukan mod paparan elemen Nilai biasa adalah tiada dan sekat. Antaranya, tiada bermaksud menyembunyikan elemen, dan menyekat bermaksud memaparkan elemen sebagai elemen blok. Oleh itu, kita boleh memaparkan dan menyembunyikan div dengan mengawal atribut paparan.

1.1 Menyembunyikan div

Untuk menyembunyikan div, hanya tetapkan atribut paparannya kepada tiada. Berikut ialah contoh:

<div id="myDiv" style="display:none;">这是要隐藏的div</div>

Dalam kod di atas, kami telah menambahkan atribut id pada teg div untuk menggayakannya dalam CSS. Pada masa yang sama, kami menetapkan atribut paparan div kepada tiada supaya ia akan disembunyikan.

1.2 Paparan div

Untuk memaparkan div tersembunyi, hanya tetapkan atribut paparannya untuk menyekat atau nilai lain yang boleh dilihat. Berikut ialah contoh:

<button onclick="showDiv()">点击显示div</button>
<div id="myDiv" style="display:none;">这是要显示的div</div>
<script>
function showDiv() {
  document.getElementById("myDiv").style.display = "block";
}
</script>

Dalam kod di atas, kami menambah butang dan mengikat acara onclick padanya Apabila pengguna mengklik butang, fungsi showDiv() akan dipanggil untuk menukar div's atribut paparan ditetapkan untuk menyekat supaya ia dipaparkan.

2. Gunakan atribut keterlihatan untuk memaparkan dan menyembunyikan div

Atribut keterlihatan digunakan untuk menentukan keterlihatan unsur-nilai biasa kelihatan dan tersembunyi. Antaranya, tersembunyi bermaksud menyembunyikan unsur, dan nampak bermaksud menjadikan unsur itu kelihatan. Oleh itu, kita juga boleh memaparkan dan menyembunyikan div dengan mengawal atribut keterlihatan.

2.1 Menyembunyikan div

Untuk menyembunyikan div, hanya tetapkan atribut keterlihatannya kepada tersembunyi. Berikut ialah contoh:

<div id="myDiv" style="visibility:hidden;">这是要隐藏的div</div>

Dalam kod di atas, kami telah menambahkan atribut id pada teg div untuk menggayakannya dalam CSS. Pada masa yang sama, kami menetapkan sifat keterlihatan div kepada tersembunyi supaya ia akan disembunyikan.

2.2 Paparan div

Untuk memaparkan div tersembunyi, hanya tetapkan sifat keterlihatannya kepada kelihatan. Berikut ialah contoh:

<button onclick="showDiv()">点击显示div</button>
<div id="myDiv" style="visibility:hidden;">这是要显示的div</div>
<script>
function showDiv() {
  document.getElementById("myDiv").style.visibility = "visible";
}
</script>

Dalam kod di atas, kami menambah butang dan mengikat acara onclick padanya Apabila pengguna mengklik butang, fungsi showDiv() akan dipanggil untuk menukar div's sifat keterlihatan ditetapkan kepada kelihatan untuk menjadikannya kelihatan.

3. Kesimpulan

Melalui contoh di atas, kita dapat melihat bahawa paparan dan penyembunyian div boleh dicapai menggunakan atribut paparan dan keterlihatan. Perbezaannya ialah atribut paparan akan mengalih keluar sepenuhnya elemen dari halaman, manakala atribut keterlihatan hanya menyembunyikan elemen. Oleh itu, jika kita perlu mengekalkan kedudukan elemen antara bersembunyi dan menunjukkan, kita harus memilih untuk menggunakan atribut keterlihatan.

Sudah tentu, untuk pengalaman pengguna yang lebih baik, kami juga boleh menggunakan animasi CSS untuk menambah kecerunan atau kesan lain untuk menunjukkan dan menyembunyikan div. Ini perlu dicapai dengan menggabungkan atribut peralihan atau animasi CSS. Pembaca yang berminat boleh mendapatkan tutorial yang berkaitan dalam talian.

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