本文介绍一种简洁可靠的 javascript 方法，通过统一类名控制多组 div 的批量显隐切换，支持任意数量的配对内容区块（如原始内容与替换内容），并避免硬编码 id，提升可维护性与扩展性。

本文介绍一种简洁可靠的 javascript 方法，通过统一类名控制多组 div 的批量显隐切换，支持任意数量的配对内容区块（如原始内容与替换内容），并避免硬编码 id，提升可维护性与扩展性。

在实际开发中，常需实现“原始内容 ↔ 替换内容”的成组切换效果（例如：展示默认文案 vs 展示用户自定义文案、简版 vs 详版、亮色主题 vs 暗色主题等）。若为每个 div 单独写 ID 判断，代码将迅速变得冗长且难以维护。更优解是按语义分组打标——使用具有业务含义的 class（如 content-group-a、original、replaced）替代数字 ID，并通过 CSS 类选择器批量操作。

以下是一个结构清晰、可无限扩展的实现方案：

✅ 推荐做法：基于语义类名的批量切换

<!-- 原始内容组 -->
<div class="original" data-group="group1">
  <p>Content 1</p>
  <p>Content 2</p>
</div>
<div class="original" data-group="group2">
  <p>Content 3</p>
  <p>Content 4</p>
</div>
<div class="original" data-group="group3">
  <p>Content 5</p>
  <p>Content 6</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12835" title="JavaScript 测试模式"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="JavaScript 测试模式" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill12835" title="JavaScript 测试模式" class="overflowclass">JavaScript 测试模式</a>
													<p class="overflowclass">使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill12835" title="JavaScript 测试模式" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</div>

<!-- 替换内容组（初始隐藏） -->
<div class="replaced" data-group="group1" style="display:none;">
  <p>replaced Content 1</p>
  <p>replaced Content 2</p>
</div>
<div class="replaced" data-group="group2" style="display:none;">
  <p>replaced Content 3</p>
  <p>replaced Content 4</p>
</div>
<div class="replaced" data-group="group3" style="display:none;">
  <p>replaced Content 5</p>
  <p>replaced Content 6</p>
</div>

<!-- 控制按钮 -->
<div id="myDIV">
  <button class="bttn activ" onclick="switchGroup('original')">显示原始内容</button>
  <button class="bttn" onclick="switchGroup('replaced')">显示替换内容</button>
</div>

function switchGroup(targetClass) {
  // 获取所有原始组和替换组元素（共用 data-group 属性）
  const allGroups = document.querySelectorAll('.original, .replaced');

  allGroups.forEach(el => {
    const groupKey = el.dataset.group;
    // 同一组内：仅目标 class 显示，其余隐藏
    if (el.classList.contains(targetClass)) {
      el.style.display = 'block';
    } else if (el.dataset.group === groupKey) {
      el.style.display = 'none';
    }
  });
}

? 关键优势说明

• 无需修改 HTML 即可新增内容组：只需添加一对
  和

  ，逻辑自动适配；
• 解耦 ID 依赖：不再绑定 id="1"、id="2" 等易冲突、难语义化的命名；
• 支持任意数量配对：group1 ~ groupN 全部生效，无硬编码上限；
• 便于样式控制：可通过 .original { transition: opacity 0.3s; } 添加平滑过渡效果；
• 无障碍友好：配合 aria-expanded 和 role="region" 可进一步增强可访问性（进阶建议）。

⚠️ 注意事项

• data-group 值必须严格一致（大小写敏感），确保配对准确；
• 避免在 class 中混用 original/replaced 与其它功能类（如 hidden），以防样式冲突；
• 若需初始状态动态设定（如从 localStorage 读取偏好），可在 DOMContentLoaded 中调用 switchGroup() 一次；
• 生产环境建议将内联 onclick 移至外部 JS 绑定事件监听器，以提升安全性与可测试性。

此方案兼顾简洁性、可扩展性与专业实践标准，是管理多组互斥内容区块的理想选择。