如何为多个div区块复用同一切换函数并保留tab切换状态？

1. 调整HTML结构 #

给每个标签页对应的内容容器添加统一类名（比如tab-content-block），确保按钮与对应内容区块在同一父容器内，结构保持一致：

<!-- 标签页导航 -->
<div class="tab-nav">
  <button data-target="tab1" class="active">标签页1</button>
  <button data-target="tab2">标签页2</button>
  <button data-target="tab3">标签页3</button>
</div>

<!-- 标签页1内容区块 -->
<div id="tab1" class="tab-content-block active">
  <div class="btn-group">
    <button class="primary-btn uk active">UK</button>
    <button class="primary-btn int">INT</button>
  </div>
  <section class="content uk active">UK区域内容</section>
  <section class="content int">INT区域内容</section>
</div>

<!-- 标签页2内容区块 -->
<div id="tab2" class="tab-content-block">
  <div class="btn-group">
    <button class="primary-btn uk">UK</button>
    <button class="primary-btn int active">INT</button>
  </div>
  <section class="content uk">UK区域内容</section>
  <section class="content int active">INT区域内容</section>
</div>

<!-- 标签页3内容区块 -->
<div id="tab3" class="tab-content-block">
  <div class="btn-group">
    <button class="primary-btn uk active">UK</button>
    <button class="primary-btn int">INT</button>
  </div>
  <section class="content uk active">UK区域内容</section>
  <section class="content int">INT区域内容</section>
</div>

2. 编写复用型JS代码 #

通过事件委托实现按钮切换逻辑，同时用对象存储每个标签页的激活状态，切换标签页时自动恢复：

// 存储每个标签页的激活状态（UK/INT）
const tabActiveStates = {};

// 初始化：记录每个标签页的初始激活状态
document.querySelectorAll('.tab-content-block').forEach(block => {
  const tabId = block.id;
  const activeBtn = block.querySelector('.primary-btn.active');
  tabActiveStates[tabId] = activeBtn?.classList.contains('uk') ? 'uk' : 'int';
});

// 按钮切换逻辑（事件委托，无需重复绑定）
document.addEventListener('click', (e) => {
  if (!e.target.classList.contains('primary-btn')) return;

  const btn = e.target;
  const parentBlock = btn.closest('.tab-content-block');
  const tabId = parentBlock.id;
  const activeType = btn.classList.contains('uk') ? 'uk' : 'int';

  // 更新当前区块的按钮激活状态
  parentBlock.querySelectorAll('.primary-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');

  // 更新当前区块的内容显示状态
  parentBlock.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
  parentBlock.querySelector(`.content.${activeType}`).classList.add('active');

  // 保存当前标签页的激活状态
  tabActiveStates[tabId] = activeType;
});

// 标签页切换逻辑，恢复对应激活状态
document.querySelectorAll('.tab-nav button').forEach(navBtn => {
  navBtn.addEventListener('click', () => {
    const targetTabId = navBtn.dataset.target;

    // 切换标签页显示状态
    document.querySelectorAll('.tab-content-block').forEach(block => {
      block.classList.remove('active');
      if (block.id === targetTabId) {
        block.classList.add('active');
        // 恢复该标签页的按钮与内容状态
        const activeType = tabActiveStates[targetTabId];
        block.querySelectorAll('.primary-btn').forEach(b => {
          b.classList.toggle('active', b.classList.contains(activeType));
        });
        block.querySelectorAll('.content').forEach(c => {
          c.classList.toggle('active', c.classList.contains(activeType));
        });
      }
    });

    // 更新导航按钮的激活状态
    document.querySelectorAll('.tab-nav button').forEach(b => b.classList.remove('active'));
    navBtn.classList.add('active');
  });
});

3. 配套基础CSS #

确保未激活的内容和标签页默认隐藏，激活状态高亮：

/* 内容区块默认隐藏 */
.content {
  display: none;
}
.content.active {
  display: block;
}

/* 标签页默认隐藏 */
.tab-content-block {
  display: none;
  margin-top: 10px;
}
.tab-content-block.active {
  display: block;
}

/* 按钮激活样式 */
.primary-btn.active {
  background-color: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* 导航按钮样式 */
.tab-nav button {
  padding: 6px 12px;
  margin-right: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.tab-nav button.active {
  background-color: #f3f4f6;
  border-color: #2563eb;
}

核心优势 #

• 采用事件委托绑定点击事件，无需为每个按钮单独绑定，实现逻辑复用
• 用tabActiveStates对象持久化每个标签页的激活状态，切换标签页时直接读取恢复
• 通过closest()方法精准定位按钮所属的父容器，确保每个区块内的按钮只控制自身内容区

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