如何在Tab内容区域通过链接或按钮切换页面Tab

你的Tab组件本身运行正常，但内容区域内的锚点链接无法触发Tab切换，核心原因是当前JS仅给顶部Tab栏的<li>元素绑定了切换逻辑，内容里的链接没有对应的事件处理，且点击会触发浏览器默认的锚点跳转行为。

修改方案 #

1. 给内容区域内的切换链接添加专属类名，方便JS定位
2. 扩展JS逻辑，为这些链接绑定点击事件，复用现有切换函数完成Tab切换
3. 调整addActiveTab函数，让它支持通过锚点ID直接定位目标Tab，提升复用性

修改后的完整代码 #

HTML

<div class="my-tabs">
  <nav class="tabs">
    <ul>
      <li class="is-active"><a href="#tab-one">Tab One</a></li>
      <li><a href="#tab-two">Tab Two</a></li>
      <li><a href="#tab-three">Tab Three</a></li>
    </ul>
  </nav>
  
  <section class="tab-content is-active" id="tab-one">Section One Content <a href="#tab-three" class="tab-switch-link">link to Tab Three</a></section>
  <section class="tab-content" id="tab-two">Section Two Content</section>
  <section class="tab-content" id="tab-three">Section Three Content</section>
  
</div>

CSS（无需修改）

.tab-content {
  display: none;
}
.tab-content.is-active {
  display: block;
}
.tabs ul {
  align-items: center;
  border-bottom-color: #dbdbdb;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-start;
  list-style: none;
}
.tabs li {
    display: block;
}
.tabs li.is-active a {
    border-bottom-color: #3273dc;
    color: #3273dc;
}
.tabs a {
  align-items: center;
  border-bottom-color: #dbdbdb;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  color: #4a4a4a;
  display: flex;
  justify-content: center;
  margin-bottom: -1px;
  padding: .5em 1em;
  vertical-align: top;
  cursor: pointer;
  text-decoration: none;
}
.tabs a:hover {
  border-bottom-color: #363636;
  color: #363636;
}

JavaScript

const tabs = document.querySelectorAll(".my-tabs .tabs li");
const sections = document.querySelectorAll(".my-tabs .tab-content");
// 新增：获取内容区域内的切换链接
const tabSwitchLinks = document.querySelectorAll(".my-tabs .tab-switch-link");

tabs.forEach(tab => {
  tab.addEventListener("click", e => {
    e.preventDefault();
    removeActiveTab();
    // 调用修改后的addActiveTab，传入锚点ID
    addActiveTab(tab.querySelector("a").getAttribute("href"));
  });
});

// 新增：给内容里的切换链接绑定事件
tabSwitchLinks.forEach(link => {
  link.addEventListener("click", e => {
    e.preventDefault();
    removeActiveTab();
    addActiveTab(link.getAttribute("href"));
  });
});

const removeActiveTab = () => {
  tabs.forEach(tab => {
    tab.classList.remove("is-active");
  });
  sections.forEach(section => {
    section.classList.remove("is-active");
  });
};

// 修改：让addActiveTab接收锚点ID参数，而非Tab元素
const addActiveTab = (targetHref) => {
  // 找到对应Tab栏的li并激活
  const targetTab = document.querySelector(`.my-tabs .tabs li a[href="${targetHref}"]`).parentElement;
  targetTab.classList.add("is-active");
  // 找到对应内容区域并激活
  const matchingSection = document.querySelector(targetHref);
  matchingSection.classList.add("is-active");
};   

说明 #

• 给内容链接加tab-switch-link类，避免和其他普通锚点链接混淆
• 重构addActiveTab函数，让它可以通过锚点ID直接定位目标Tab和内容区域，逻辑更通用
• 给内容链接添加点击事件，阻止默认跳转，复用切换逻辑实现Tab切换

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