如何用JavaScript实现多个div内容切换并扩展至更多div（如3、4、5、6等）

嘿，看你现在的代码已经能实现基础的两个div切换了，想要扩展到更多div（比如3、4、5、6...），还得兼顾id1和3这类内容的切换需求对吧？我来帮你梳理下怎么改造，保证灵活好扩展~

首先先理清楚你的核心需求：要么是单组内多内容切换（每次只显示一个div），要么是多组独立切换（比如id1和3各自属于一个组，每组内的内容独立切换，初始都可见，点击按钮后各自变化），我给你两种方案，你按需选：

方案一：单组内扩展多div切换（所有div属于同一组，每次只显示一个） #

你的原代码其实已经有基础了，只要稍微调整下就能支持无限多div。比如：

• 所有要切换的div都加同一个class（比如one）；
• 除了默认显示的那个，其他div初始设置style="display:none"；
• 加对应按钮调用你的openOne函数就行。

比如加id3、4的话，HTML改成这样：

<div id="a1" class="one">
  <p>Content 1</p>
  <p>Content 2</p>
</div>
<div id="a2" class="one" style="display:none">
  <p>Replaced Content 1</p>
  <p>Replaced Content 2</p>
</div>
<div id="a3" class="one" style="display:none">
  <p>Content 3</p>
  <p>Content 4</p>
</div>
<div id="a4" class="one" style="display:none">
  <p>Replaced Content 3</p>
  <p>Replaced Content 4</p>
</div>

<!-- 对应按钮 -->
<button onclick="openOne('a1')">显示内容1-2</button>
<button onclick="openOne('a2')">显示替换内容1-2</button>
<button onclick="openOne('a3')">显示内容3-4</button>
<button onclick="openOne('a4')">显示替换内容3-4</button>

这里我把id改成了带前缀的a1、a2，比纯数字id更规范，能避免一些潜在的小问题。

不过这种方案每次只能显示一个div，如果你想要id1和3同时可见，那得用下面的多组方案~

方案二：多组独立切换（满足id1、3始终可见且各自切换） #

这个方案更贴合你说的“id1和3总是可见，点击按钮后变化”的需求——把内容分成独立的组，比如组A对应原来的id1、2，组B对应id3、4、5...，每组内的内容独立切换，互不干扰。

第一步：写通用的切换函数

把原来的函数改得更通用，支持指定组名，这样不管加多少组、多少div都不用改JS代码：

function toggleContent(groupClass, targetId) {
  // 隐藏当前组的所有内容
  const groupItems = document.getElementsByClassName(groupClass);
  for (let i = 0; i < groupItems.length; i++) {
    groupItems[i].style.display = 'none';
  }
  // 显示目标内容
  document.getElementById(targetId).style.display = 'block';
}

第二步：写HTML结构

给不同组的div加不同的class，初始只显示每组的默认内容：

<!-- 组A：对应原需求的id1、2 -->
<div id="a1" class="group-a">
  <p>Content 1</p>
  <p>Content 2</p>
</div>
<div id="a2" class="group-a" style="display:none">
  <p>Replaced Content 1</p>
  <p>Replaced Content 2</p>
</div>

<!-- 组B：对应原需求的id3、4、5... -->
<div id="b1" class="group-b">
  <p>Content 3</p>
  <p>Content 4</p>
</div>
<div id="b2" class="group-b" style="display:none">
  <p>Replaced Content 3</p>
  <p>Replaced Content 4</p>
</div>
<div id="b3" class="group-b" style="display:none">
  <p>Another Replaced Content 3</p>
  <p>Another Replaced Content 4</p>
</div>

<!-- 组A控制按钮 -->
<button onclick="toggleContent('group-a', 'a1')">恢复组A默认内容</button>
<button onclick="toggleContent('group-a', 'a2')">切换组A到替换内容</button>

<!-- 组B控制按钮 -->
<button onclick="toggleContent('group-b', 'b1')">恢复组B默认内容</button>
<button onclick="toggleContent('group-b', 'b2')">切换组B到替换内容1</button>
<button onclick="toggleContent('group-b', 'b3')">切换组B到替换内容2</button>

第三步：扩展更多div

要加更多div（比如组B的b4、b5），只要复制b2的结构，把id改成b4、b5，class保持group-b，初始隐藏，再加对应的按钮就行：

<div id="b4" class="group-b" style="display:none">
  <p>Third Replaced Content 3</p>
  <p>Third Replaced Content 4</p>
</div>
<button onclick="toggleContent('group-b', 'b4')">切换组B到替换内容3</button>

完全不用碰JS代码，超级方便！

额外小技巧：一键切换多组内容 #

如果你想要点击一个按钮，同时切换组A和组B的内容，比如一键切换到所有替换内容，可以写个组合函数：

function toggleAll(targetAId, targetBId) {
  toggleContent('group-a', targetAId);
  toggleContent('group-b', targetBId);
}

然后加个按钮：

<button onclick="toggleAll('a2', 'b2')">同时切换两组到替换内容</button>
<button onclick="toggleAll('a1', 'b1')">同时恢复两组默认内容</button>

这样就完美实现你要的所有需求啦~

备注：内容来源于stack exchange，提问作者absBeginner