标签页按钮点击一次后失效问题排查及优化方案咨询

问题根源 #

1. 重复ID冲突：页面中多个元素使用了相同的ID（如writting_tab_button、curency），document.getElementById()仅会返回第一个匹配元素，后续标签页内的同名按钮未绑定点击事件。
2. 导航按钮冗余：每个标签页容器内都重复放置了一套导航按钮，不仅造成代码冗余，还会因容器隐藏导致非当前页的按钮无法触发事件。

优化实现方案 #

将导航按钮抽离到所有标签页容器之外，使用类统一管理标签页的显示/隐藏，同时避免ID重复问题：

优化后的HTML

<!-- 统一导航栏 -->
<nav class="tab-nav">
  <button class="tab-btn active" data-tab="writing">writing</button>
  <button class="tab-btn" data-tab="upgrades">upgrades</button>
  <button class="tab-btn" data-tab="options">options</button>
</nav>

<!-- 标签页容器 -->
<div class="tab-container active" id="tab-writing">
  <h2 class="currency">0 words</h2>
  <div class="progress-wrap">
    <progress class="progress-bar" value="0" max="100"></progress>
  </div>
  <button onclick="updateProgressBar()" id="think_button">think</button>
  <p>asd</p>
</div>

<div class="tab-container" id="tab-upgrades">
  <h2 class="currency">0 words</h2>
  <div class="progress-wrap">
    <progress class="progress-bar" value="0" max="100"></progress>
  </div>
  <p>asd2</p>
</div>

<div class="tab-container" id="tab-options">
  <h2 class="currency">0 words</h2>
  <div class="progress-wrap">
    <progress class="progress-bar" value="0" max="100"></progress>
  </div>
  <p>asd3</p>
</div>

优化后的CSS

/* 导航样式 */
.tab-nav {
  margin-bottom: 1rem;
}
.tab-btn {
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  border: none;
  background: #eee;
  cursor: pointer;
}
.tab-btn.active {
  background: #2196F3;
  color: white;
}

/* 标签页容器样式 */
.tab-container {
  display: none;
  text-align: center;
}
.tab-container.active {
  display: block;
}

/* 其他样式 */
.currency {
  margin: 1rem 0;
}
.progress-wrap {
  margin: 1rem 0;
}

优化后的JS

// 获取所有标签按钮和容器
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContainers = document.querySelectorAll('.tab-container');

// 绑定点击事件
tabBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取目标标签页ID
    const targetTab = btn.dataset.tab;
    
    // 移除所有按钮和容器的激活状态
    tabBtns.forEach(b => b.classList.remove('active'));
    tabContainers.forEach(c => c.classList.remove('active'));
    
    // 给当前按钮和对应容器添加激活状态
    btn.classList.add('active');
    document.getElementById(`tab-${targetTab}`).classList.add('active');
  });
});

// 保留原有的进度条函数
function updateProgressBar() {
  // 这里写你的进度条更新逻辑
}

方案优势 #

• 代码结构更清晰，避免冗余重复
• 使用data-*属性关联按钮与标签页，扩展性更强（新增标签页只需添加对应按钮和容器，无需修改JS）
• 通过类控制显示/隐藏，比直接操作style.display更符合CSS与JS分离的原则
• 解决了ID冲突问题，确保所有交互逻辑正常触发

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