html div hide

HTML div hide

Dalam pembangunan web, kami biasanya menggunakan teg div HTML untuk mencipta bekas peringkat blok dan menggunakan gaya CSS untuk mencantikkannya. Walau bagaimanapun, ada kalanya anda perlu menyembunyikan elemen div ini, seperti apabila data belum dimuatkan, atau apabila tidak perlu memaparkan kandungan tertentu. Dalam artikel ini, kami akan membincangkan cara yang berbeza untuk menyembunyikan elemen div.

1. Gunakan CSS untuk menyembunyikan div

Anda boleh menggunakan gaya CSS untuk menjadikan div tidak kelihatan. Ini boleh dicapai dengan menetapkan sifat paparan div kepada tiada. Jika kaedah ini digunakan, elemen div tidak lagi akan menduduki ruang halaman dan tidak akan dipaparkan pada halaman.

Berikut ialah contoh:

div.hidden {
  display: none;
}

Kemudian, gunakan kod berikut dalam fail HTML:

<div class="hidden">这是需要隐藏的内容</div>

2. Gunakan JavaScript untuk menyembunyikan div

Tidak seperti menggunakan CSS, JavaScript boleh menyembunyikan atau menunjukkan elemen div berdasarkan syarat. Keadaan ini boleh dicetuskan oleh interaksi pengguna, masa atau sebarang peristiwa lain.

Berikut ialah contoh:

document.getElementById("demo").style.display = "none";

Dalam fail HTML, anda perlu menambah elemen div dengan id "demo".

Kaedah ini juga boleh dilaksanakan menggunakan fungsi, contohnya:

function hide() {
  var x = document.getElementById("demo");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

3. Gunakan jQuery untuk menyembunyikan div

jQuery ialah perpustakaan JavaScript yang boleh memudahkan operasi DOM dan menyediakan banyak fungsi dan kaedah terbina dalam. Sembunyikan dan tunjukkan elemen div dengan mudah menggunakan jQuery.

Untuk menggunakan jQuery, anda perlu memperkenalkan perpustakaan jQuery terlebih dahulu ke dalam fail HTML:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Kemudian, gunakan kod berikut untuk menyembunyikan elemen div:

$(document).ready(function(){
  $("#demo").hide();
});

Jika anda ingin memaparkan elemen div, anda boleh menggunakan kod berikut:

$(document).ready(function(){
  $("#demo").show();
});

4. Sembunyikan div menggunakan kaedah AngularJS

AngularJS ialah rangka kerja JavaScript yang dibangunkan oleh Google untuk membina dinamik aplikasi web. Dengan menggunakan arahan ng-show dan ng-hide AngularJS, anda boleh menyembunyikan atau menunjukkan elemen div berdasarkan syarat.

Berikut ialah contoh:

<div ng-hide="isHidden">这是需要隐藏的内容</div>

Jika nilai pembolehubah isHidden adalah benar, kandungan yang dikaitkan dengan elemen div ini akan disembunyikan. Jika anda ingin memaparkan kandungan ini, nilai pembolehubah isHidden mestilah palsu.

5. Gunakan Vue.js untuk menyembunyikan div

Vue.js ialah rangka kerja JavaScript yang progresif untuk membina antara muka pengguna. Dengan menggunakan arahan v-show Vue.js, anda boleh menyembunyikan atau menunjukkan elemen div berdasarkan syarat.

Berikut ialah contoh:

<div v-show="isHidden">这是需要隐藏的内容</div>

Jika nilai pembolehubah isHidden adalah benar, kandungan yang dikaitkan dengan elemen div ini akan disembunyikan. Jika anda ingin memaparkan kandungan ini, nilai pembolehubah isHidden mestilah palsu.

Ringkasan

Di atas adalah beberapa cara biasa untuk menyembunyikan elemen div, setiap kaedah mempunyai kelebihan dan kekurangannya sendiri. Apabila membangunkan aplikasi web, anda perlu memilih pendekatan yang paling sesuai berdasarkan situasi.

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