如何使用 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中文网其他相关文章！