JavaScript多页面多Div显隐优化：无需枚举Div ID调用函数

嘿，我来帮你解决这个多页面Div显示/隐藏的问题！你想要不用枚举所有Div ID就能实现功能，还想优化你的divVisibility函数，这两个需求其实可以通过统一标识+自动批量处理来搞定，我给你两个实用的方案：

方案1：统一类名 + 数据属性（最推荐） #

这个方法让你不用管页面有多少个Div，只要给需要控制的元素加统一标记就行，完全不用手动列ID。

第一步：HTML结构改造 #

给所有需要切换显示的Div加一个统一类名（比如toggle-target），给触发按钮加data-target属性，值对应要显示的Div的ID：

<!-- 触发按钮 -->
<button data-target="content-1">显示内容1</button>
<button data-target="content-2">显示内容2</button>
<button data-target="content-3">显示内容3</button>

<!-- 要控制的Div -->
<div class="toggle-target" id="content-1">这是内容区域1</div>
<div class="toggle-target" id="content-2" style="display: none;">这是内容区域2</div>
<div class="toggle-target" id="content-3" style="display: none;">这是内容区域3</div>

第二步：优化后的JS函数 #

这个函数会自动识别所有标记的元素，绑定事件，并且确保始终只有一个Div可见：

function setupDivToggle() {
  // 批量获取所有触发按钮和目标Div
  const toggleButtons = document.querySelectorAll('[data-target]');
  const targetDivs = document.querySelectorAll('.toggle-target');

  // 给每个按钮绑定点击事件
  toggleButtons.forEach(button => {
    button.addEventListener('click', () => {
      const targetId = button.getAttribute('data-target');
      // 先隐藏所有目标Div
      targetDivs.forEach(div => div.style.display = 'none');
      // 再显示选中的Div（自动保证唯一可见）
      const targetDiv = document.getElementById(targetId);
      if (targetDiv) targetDiv.style.display = 'block';
    });
  });

  // 初始化：确保页面加载时至少有一个Div显示（优先第一个）
  if (targetDivs.length > 0) {
    targetDivs[0].style.display = 'block';
  }
}

// 页面加载完成后执行初始化（避免找不到元素）
document.addEventListener('DOMContentLoaded', setupDivToggle);

方案2：ID前缀选择器（不用加额外类） #

如果你不想给Div加类，可以用ID前缀来批量选择元素，比如所有目标Div的ID都以toggle-开头：

// 替换方案1中的targetDivs选择器即可
const targetDivs = document.querySelectorAll('[id^="toggle-"]');

按钮的data-target对应完整ID（比如toggle-content1），其余逻辑和方案1完全一致。

关于你之前修改的divVisibility函数优化 #

你提到把null替换为divId来保证总有一个Div可见，其实在上面的方案里，我们通过先隐藏所有、再显示目标的逻辑，已经自动实现了“唯一可见”的效果，不需要单独处理空值的情况。如果需要默认显示特定Div，还可以给它加个active类，修改初始化逻辑：

// 初始化：优先显示带active类的Div，没有则显示第一个
const defaultActive = document.querySelector('.toggle-target.active');
if (defaultActive) {
  targetDivs.forEach(div => {
    div.style.display = div === defaultActive ? 'block' : 'none';
  });
} else if (targetDivs.length > 0) {
  targetDivs[0].style.display = 'block';
}

这个方案的好处是完全适配不同页面的Div数量，不管是2个还是10个，只要标记正确，函数就能自动工作，不用改代码~

内容的提问来源于stack exchange，提问作者Alejandro Hdz