前端Tab切换功能失效求助：Frontend Mentor项目问题排查

核心问题排查 #

• 重复ID违规：HTML中按钮与对应内容区域共用了相同的id（如tab1同时出现在按钮和内容div上），违反HTML规范中id必须唯一的要求，会导致DOM选择逻辑异常。
• 缺少关联标识：JavaScript中尝试通过e.target.dataset.id获取切换标识，但按钮元素未设置data-id属性，导致id始终为undefined，切换逻辑无法触发。
• Active类逻辑冗余：遍历移除按钮active类时，每次循环都重复给当前按钮添加active类，属于无效重复操作，需调整执行顺序。

修复后的代码 #

HTML（修正ID冲突，添加关联标识）

<section class="features">
  <div>
    <h2>Features</h2>
    <p>Our aim is to make it quick and easy for you to access your favourite websites.
      Your bookmarks sync between your devices so you can access them on the go.</p>
  </div>
</section>
<section id="allTabs" class="allTabs">
  <div class="btn-container">
    <button class="tab-btn active" data-id="tab1-content">Simple Bookmarking</button>
    <button class="tab-btn" data-id="tab2-content">Speedy Searching</button>
    <button class="tab-btn" data-id="tab3-content">Easy Sharing</button>
  </div>
  <div class="tab active" id="tab1-content">
    <img class="tab-img" src="./images/illustration-features-tab-1.svg" alt="">
    <article>
      <h3 class="tab-title">Bookmark in one click</h3>
      <p class="tab-text">Organize your bookmarks however you like. Our simple drag-and-drop interface
        gives you complete control over how you manage your favourite sites.</p>
      <button class="tab-btn-more-info">More Info</button>
    </article>
  </div>
  <div class="tab" id="tab2-content">
    <img class="tab-img" src="./images/illustration-features-tab-2.svg" alt="">
    <article>
      <h3 class="tab-title">Intelligent search</h3>
      <p class="tab-text">Our powerful search feature will help you find saved sites in no time at all.
        No need to trawl through all of your bookmarks.</p>
      <button class="tab-btn-more-info">More Info</button>
    </article>
  </div>
  <div class="tab" id="tab3-content">
    <img class="tab-img" src="./images/illustration-features-tab-3.svg" alt="">
    <article>
      <h3 class="tab-title">Share your bookmarks</h3>
      <p class="tab-text">Easily share your bookmarks and collections with others. Create a shareable
        link that you can send at the click of a button.</p>
      <button class="tab-btn-more-info">More Info</button>
    </article>
  </div>
</section>

JavaScript（优化逻辑顺序）

const allTabs = document.querySelector(".allTabs");
const btnsAll = document.querySelectorAll(".tab-btn");
const articles = document.querySelectorAll(".tab");

allTabs.addEventListener("click", function(e) {
  const id = e.target.dataset.id;
  if (id) {
    // 移除所有按钮的active类
    btnsAll.forEach(function(btn) {
      btn.classList.remove("active");
    });
    // 给当前点击按钮添加active类
    e.target.classList.add("active");
    
    // 隐藏所有内容区域
    articles.forEach(function(article) {
      article.classList.remove("active");
    });
    // 显示对应内容区域
    const element = document.getElementById(id);
    element.classList.add("active");
  }
});

CSS（保留原样式）

.tab {
  display: none;
}

.tab-btn.active {
  border-bottom: 3px solid hsl(0, 94%, 66%);
}

.tab.active {
  display: flex;
  margin-left: 4.2rem;
  margin-right: 4.2rem;
}

修复说明 #

1. 给按钮添加data-id属性，值对应内容区域的唯一ID，建立点击按钮与目标内容的关联。
2. 修改内容区域的ID，避免与按钮ID重复，符合HTML规范。
3. 调整Active类的执行顺序，先统一移除所有按钮的active类，再给当前点击按钮添加，逻辑更简洁高效。

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