html tunjukkan sorok

Pengenalan kepada HTML tunjukkan/sembunyikan teknologi

Dalam pembangunan web, memaparkan dan menyembunyikan elemen halaman adalah keperluan biasa. Sebagai contoh, apabila menukar kandungan pada halaman, gambar yang sepadan perlu dipaparkan dan disembunyikan dengan sewajarnya. Untuk menyelesaikan masalah ini, pembangun perlu menguasai teknologi paparan dan penyembunyian, yang merupakan teknologi penting untuk menjadikan laman web lebih mesra dan fleksibel.

Terdapat banyak cara untuk menunjukkan/menyembunyikan elemen Artikel ini akan memperkenalkan empat kaedah berikut:

1. Menggunakan JavaScript
   Dengan menulis kod JavaScript dan membenamkannya dalam HTML. halaman, Anda boleh mencapai kesan menunjukkan dan menyembunyikan elemen. Kaedah khusus adalah seperti berikut:

Pertama, anda perlu mencipta elemen dalam halaman HTML, seperti coretan kod berikut:

<div id="myDiv">这是一个div元素</div>

Kemudian, apabila menggunakan JavaScript, anda boleh memanipulasi HTML DOM Ubah suai atribut elemen (contohnya, tetapkan gayanya kepada "display:none;" atau "display:block;") untuk menunjukkan atau menyembunyikannya.

Berikut ialah fungsi JavaScript mudah yang menyongsangkan keadaan paparan elemen:

function toggleDivVisibility() {
  var myDiv = document.getElementById("myDiv");
  if (myDiv.style.display === "none") {
    myDiv.style.display = "block";
  } else {
    myDiv.style.display ="none";
  }
}

Fungsi ini mula-mula mendapatkan elemen melalui kaedah getElementById() dan kemudian menetapkan gayanya untuk dipaparkan atau bersembunyi.

2. Menggunakan CSS
   Terdapat sifat "keterlihatan" dalam CSS, yang boleh mengawal keterlihatan unsur. Berbeza daripada kaedah di atas, apabila menggunakan kaedah CSS, dua kelas berbeza perlu ditakrifkan dalam HTML untuk mewakili paparan dan keadaan tersembunyi masing-masing. Contohnya:

.hide {
  visibility: hidden;
}
.show {
  visibility: visible;
}

Kemudian, dalam halaman HTML, anda perlu menentukan kelas elemen untuk mengawal keadaan paparannya, sebagai contoh:

<div id="myDiv" class="hide">我要被隐藏</div>

Sekarang, kami tidak' t perlu menggunakan JavaScript, cuma Anda perlu mengubah suai kelas CSS untuk menukar keadaan paparan elemen. Kaedah pelaksanaan khusus adalah seperti berikut:

document.getElementById("myDiv").classList.toggle("hide");
document.getElementById("myDiv").classList.toggle("show");

kaedah classList.toggle() sangat mudah, dan boleh dipaparkan atau disembunyikan dengan menukar nama kelas.

3. Menggunakan jQuery
   jQuery ialah perpustakaan JavaScript popular yang boleh mencapai kesan manipulasi DOM dengan mudah. Untuk menggunakan jQuery untuk mengawal keterlihatan elemen, anda perlu memperkenalkan perpustakaan jQuery ke dalam halaman HTML terlebih dahulu. Contohnya:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Kemudian, kita boleh menggunakan kod berikut untuk memaparkan dan menyembunyikan elemen:

$("#myDiv").toggle();

Fungsi ini secara automatik akan menentukan keadaan semasa elemen dan menukar paparannya atau bersembunyi.

4. Menggunakan Rangka Kerja
   Rangka kerja ialah satu set perpustakaan dan alatan untuk membangunkan aplikasi web. Terutamanya dalam aplikasi satu halaman, keupayaan untuk menunjukkan/menyembunyikan elemen sudah dilaksanakan dalam rangka kerja tanpa perlu menulis kod sendiri. Rangka kerja biasa termasuk Angular, React, Vue, dsb.

Sebagai contoh, dalam React, pembangun boleh mencipta komponen yang mengandungi butang. Apabila butang diklik, komponen itu memaparkan semula untuk menunjukkan/menyembunyikan elemen yang ditentukan.

Berikut ialah contoh kod untuk komponen React:

import React, {useState} from 'react';

function ShowHide() {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(!show)}>切换显示/隐藏</button>
      {show && <div>这是显示的元素。</div>}
    </>
  );
}

Perhatikan bahawa fungsi useState() ialah salah satu fungsi cangkuk yang digunakan untuk mengisytiharkan keadaan dalam React. Dengan mengklik butang, ia menogol keadaan pembolehubah rancangan dan memaparkan semula komponen, dalam kod di atas, menjadikan elemen yang ditentukan menunjukkan atau menyembunyikan.

Kesimpulan

Tidak kira kaedah yang anda pilih, anda perlu melaksanakan fungsi menunjukkan/menyembunyikan elemen dalam membangunkan halaman web. Menguasai teknologi ini boleh menjadikan tapak web lebih mesra pengguna dan fleksibel, menjadikannya lebih mudah untuk digunakan dan disesuaikan dengan senario yang berbeza.

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