Cara Memperluas dan Meruntuhkan DIV menggunakan JavaScript

Div digunakan untuk menggabungkan elemen pada halaman web. Terdapat dua cara untuk membuat div hilang: satu dengan menjadikannya tidak kelihatan, dan satu lagi dengan menutupnya. Jika hanya membuat div tidak kelihatan, ruang kosong tetap ada di tempatnya. Menutup (collapse) div memadam ruang kosong itu, sehingga tiada 'lubang' pada halaman web. Dengan JavaScript yang dipautkan ke butang, anda boleh mencipta div yang boleh dilipat dan dikembangkan apabila pengguna klik butang.

Tambah Div ke Halaman Web

Langkah 1

Buka Notepad dan buka mana-mana dokumen HTML anda.

Langkah 2

Tambahkan blok kod HTML berikut ke bahagian "body" dokumen:

<div id="MyDiv" class="divVisible">
    <p>Teks Div</p>
</div>
<input id="Button1" type="button" value="Collapse/Expand" onclick="return CollapseExpand()">

Kod ini mencipta satu div dan satu butang. Div mengandungi satu perenggan teks "Teks Div" – gantikan teks tersebut mengikut kehendak anda. Butang dipanggil fungsi JavaScript ketika diklik, yang menukar keadaan div antara terkumpul (collapse) dan terbuka (expand).

Pastikan div mempunyai atribut "id" dan "class". Di sini id ditetapkan kepada "MyDiv" dan kelas kepada "divVisible" – nama kelas CSS yang akan ditakrifkan pada bahagian seterusnya.

Tambah Kelas CSS dan JavaScript

Langkah 1

Masukkan kod CSS berikut ke bahagian "head":

<style type="text/css">
.divVisible {display:block;}
.divHidden {display:none;}
</style>

Kelas divVisible menjadikan elemen kelihatan dan memegang ruang, manakala divHidden menyembunyikan elemen tanpa meninggalkan ruang.

Langkah 2

Sisipkan kod JavaScript berikut selepas CSS:

function CollapseExpand(){
  var divID = 'MyDiv';
  var div = document.getElementById(divID);
  if(div.className == 'divVisible'){
    div.className = 'divHidden';
  } else {
    div.className = 'divVisible';
  }
  return false;
}

Fungsi ini menukar nama kelas div setiap kali dipanggil: pertama menukarnya kepada divHidden, kemudian kembali ke divVisible.

Langkah 3

Simpan fail HTML dan buka dalam pelayar. Teks perenggan akan muncul.

Klik butang "Collapse/Expand". Teks akan menghilang. Klik lagi untuk mengembalikannya. Perhatikan bagaimana elemen di bawah teks bergerak ke atas bila teks dipadatkan dan turun bila teks dikembangkan.

URL:https://ms.whycomputer.com/internet/1015006624.html