Bagaimanakah JavaScript Boleh Digunakan untuk Togol Keterlihatan Berbilang Elemen Div pada Halaman Web?

Memaparkan dan Menyembunyikan Elemen Menggunakan JavaScript

Dalam pembangunan web, memaparkan atau menyembunyikan elemen secara dinamik pada halaman web boleh meningkatkan dengan ketara antara muka pengguna. Artikel ini menumpukan pada memanipulasi keterlihatan elemen div menggunakan JavaScript, memberikan anda kaedah yang boleh dipercayai untuk mengawal penampilan dan kelakuan halaman web anda.

Matlamat kami adalah untuk memahami cara menukar keterlihatan dua div pada laman web menggunakan butang. Walaupun kod awal anda berjaya menogol paparan satu div, kami akan meneroka penyelesaian komprehensif untuk menogol paparan kedua-dua div dengan berkesan.

Menyembunyikan dan Memaparkan Elemen

Memanipulasi sifat gaya elemen adalah penting untuk mengawal keterlihatannya. Sifat paparan terbukti menjadi pilihan yang paling serba boleh dalam mengurus cara elemen muncul pada halaman:

element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show

Sebagai alternatif, mengubah suai sifat keterlihatan memastikan elemen mengekalkan ruang yang diperuntukkan walaupun tersembunyi:

element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show

Menogol Keterlihatan untuk Sekumpulan Elemen

Untuk menogol keterlihatan berbilang elemen, ulangi setiap elemen dan tetapkan sifat paparannya kepada tiada:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

Fungsi utiliti ini menerima kedua-dua elemen tunggal atau tatasusunan elemen, memastikan fleksibiliti dalam menyembunyikan sekumpulan elemen.

Menggunakan kaedah ini, kami boleh memperhalusi kod anda untuk mencapai kefungsian yang diingini:

function toggleView(active, hidden) {
  document.getElementById(active).style.display = 'block';
  document.getElementById(hidden).style.display = 'none';
}

// Usage:
const view1 = 'target';
const view2 = 'replace_target';

document.querySelector('button.toggle').addEventListener('click', () => {
  toggleView(activeView === view1 ? view2 : view1, activeView === view1 ? view1 : view2);
  activeView = activeView === view1 ? view2 : view1;
});

Kod yang disemak ini memberikan paparan aktif dan tersembunyi secara dinamik berdasarkan klik butang. Dengan menukar antara dua pembolehubah, kami secara berkesan menogol keterlihatan sasaran dan div gantian.

Dengan menguasai teknik JavaScript ini, anda boleh mengawal keterlihatan elemen pada halaman web anda dengan lancar, meningkatkan penglibatan pengguna dan keseluruhan fungsi tapak web anda.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Digunakan untuk Togol Keterlihatan Berbilang Elemen Div pada Halaman Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!