html tunjukkan sorok

WBOY
Lepaskan: 2023-05-21 20:37:35
asal
1353 orang telah melayarinya

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>
Salin selepas log masuk

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";
  }
}
Salin selepas log masuk

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

  1. 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;
}
Salin selepas log masuk

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

<div id="myDiv" class="hide">我要被隐藏</div>
Salin selepas log masuk

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");
Salin selepas log masuk

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

  1. 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>
Salin selepas log masuk

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

$("#myDiv").toggle();
Salin selepas log masuk

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

  1. 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>}
    </>
  );
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan