如何使用JavaScript点击子标签时激活父标签内容？

需求：点击“Outer tab 1”和“Outer tab 2”时，自动激活对应的父标签“Main tab 1”；点击“Outer tab 3”和“Outer tab 4”时，自动激活父标签“Main tab 2”，同时切换对应主标签内容。

完整代码实现 #

HTML 结构 #

<h1>TOGGLE TABS</h1>
  
<div class="wrapper">
  
  <div class="buttonWrapper">
    <button class="tab-button main-tab-btn active" style="border-top-left-radius: 10px;" data-id="maintab1">Main tab 1</button>
    <button class="tab-button main-tab-btn" data-id="maintab2">Main tab 2</button>
  </div>
  
  <div class="contentWrapper">
    <div class="content active" id="maintab1">
      Main Tab 1 Content
    </div>
    <div class="content" id="maintab2">
      Main Tab 2 Content
    </div>
  </div>
  
  <div class="outer-tab">
    <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab1">Outer tab 1</button>
    <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab1">Outer tab 2</button>
    <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab2">Outer tab 3</button>
    <button class="child-tab-btn" style="border-top-left-radius: 10px;" data-id="maintab2">Outer tab 4</button>
  </div>
  
  <div class="outer-content">
    <div class="outer-tab-content">Outer tab 1 content</div>
    <div class="outer-tab-content">Outer tab 2 content</div>
    <div class="outer-tab-content">Outer tab 3 content</div>
    <div class="outer-tab-content">Outer tab 4 content</div>
  </div>
  
</div>

CSS 样式 #

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');

body {
  font-family: 'Jost', sans-serif;
  background-color: #f0f5ff;
}

h1 {
  font-size: 48px;
  color: #232c3d;
  text-align:center;
}

.wrapper {
  width: 590px;
  margin: auto;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);
}

.buttonWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

button {
  letter-spacing: 3px;
  border: none;
  padding: 10px;
  background-color: green;
  color: #232c3d;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover {
  background-color: inherit;
}

button.active {
  background-color: orange;
}

.active {
  background-color: white;
}

p {
  text-align: left;
  padding: 10px;
}

.content {
  display: none;
  padding: 10px 20px;
}

.content.active {
  display: block;
}

（注：修正了.buttonWrapper的网格列数，原代码列数与按钮数量不匹配，调整为1fr 1fr更合理）

JavaScript 逻辑 #

const mainTabs = document.querySelectorAll(".main-tab-btn");
const childTabs = document.querySelectorAll(".child-tab-btn");
const contents = document.querySelectorAll(".content");
const buttons = document.querySelectorAll("button");
    
function SetContent(tabIdx) {
   // 重置所有内容显示状态
   contents.forEach(content => {
      content.classList.remove("active");
   });
   const content = document.getElementById(tabIdx);
   content.classList.add("active");
}

function ResetButtons(){
   // 重置所有按钮的激活状态
   buttons.forEach(btn => {
     btn.classList.remove("active");
   });
}

// 为主标签按钮绑定点击事件
mainTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     const id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     e.target.classList.add("active");
  });
});

// 为子标签按钮绑定点击事件
childTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     const id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     // 找到对应主标签按钮并激活
     const mainBtn = document.querySelector(`.main-tab-btn[data-id="${id}"]`);
     mainBtn.classList.add("active");
     // 激活当前点击的子标签
     e.target.classList.add("active");
  })
})

核心逻辑说明 #

1. 状态重置：通过ResetButtons清除所有按钮的active类，通过SetContent清除所有内容的active类，避免状态混乱。
2. 子标签联动：点击子标签时，通过其data-id属性关联到对应的主标签，找到主标签按钮并为其添加active类，同时切换主标签内容。
3. 双向激活：主标签点击时仅激活自身并切换内容；子标签点击时同时激活自身和对应主标签，满足需求。

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