在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中文網其他相關文章！
