如何使用 JavaScript 來切換網頁上多個 Div 元素的可見性？

使用JavaScript 顯示和隱藏元素

在Web 開發中，動態顯示或隱藏網頁上的元素可以顯著增強使用者介面。本文重點在於使用 JavaScript 操作 div 元素的可見性，為您提供可靠的方法來控制網頁的外觀和行為。

我們的目標是了解如何切換兩個 div 的可見性使用按鈕的網頁。雖然您的初始程式碼成功切換了一個 div 的視圖，但我們將探索一個全面的解決方案來有效切換兩個 div 的顯示。

隱藏和顯示元素

操作元素的樣式屬性對於控制其可見性至關重要。事實證明，顯示屬性是管理元素在頁面上顯示方式的最通用選項：

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

或者，修改可見性屬性可確保元素即使在隱藏時也能保持其分配的空間：

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

切換一組的可見性元素

要切換多個元素的可見性，請迭代每個元素並將其顯示屬性設為none：

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

此實用程式函數接受單一元素或元素數組，確保隱藏一組元素的靈活性。

利用這些方法，我們可以改進您的程式碼以實現所需的效果功能：

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;
});

此修訂後的程式碼根據按鈕點擊動態分配活動視圖和隱藏視圖。透過在兩個變數之間切換，我們可以有效地切換目標和替換 div 的可見性。

透過掌握這些 JavaScript 技術，您可以無縫控制網頁上元素的可見性，從而增強使用者參與度和整體效果您網站的功能。

以上是如何使用 JavaScript 來切換網頁上多個 Div 元素的可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！