如何在选中父选项卡时为子选项卡添加active类？

• "Outer tab 1" 和 "Outer tab 2" 隶属于 "Main tab 1"，"Outer tab 3" 和 "Outer tab 4" 隶属于 "Main tab 2"
• 核心需求：
  • 页面加载/刷新时，默认 "Main tab 1" 和 "Outer tab 1" 处于激活状态
  • 点击 "Main tab 2" 时，"Outer tab 3" 需自动切换为激活状态
• 当前代码缺失功能：点击主选项卡（"Main..."）时，为对应分组的子选项卡（"Outer..."）添加active类

只需修改主选项卡的点击事件逻辑，同时同步处理子选项卡和子内容的激活状态即可，修改后的完整JS代码如下：

const mainTabs = document.querySelectorAll(".main-tab-btn");
const childTabs = document.querySelectorAll(".child-tab-btn");
const contents = document.querySelectorAll(".content");
const buttons = document.querySelectorAll("button");

const childTabsBtn = document.querySelectorAll('[data-tab-value]');
const childTabsContent = document.querySelectorAll('[data-tab-info]')
    
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");
   });
}

// 重置所有子内容的激活状态
function ResetChildContents() {
  childTabsContent.forEach(tabInfo => {
    tabInfo.classList.remove('active')
  })
}

// 主选项卡点击事件
mainTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     var id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     ResetChildContents();
     // 激活当前主选项卡
     e.target.classList.add("active");
     // 找到当前主选项卡分组下的第一个子选项卡
     const firstChildTab = document.querySelector(`.child-tab-btn[data-id="${id}"]`);
     if (firstChildTab) {
       firstChildTab.classList.add("active");
       // 激活对应的子内容
       const targetChildContent = document.querySelector(firstChildTab.dataset.tabValue);
       if (targetChildContent) {
         targetChildContent.classList.add('active');
       }
     }
  });
});

// 子选项卡点击事件
childTabs.forEach(function(tab){
  tab.addEventListener("click", function(e){
     var id = e.target.getAttribute("data-id");
     SetContent(id);
     ResetButtons();
     ResetChildContents();
     // 激活对应的主选项卡
     const mainTab = document.querySelector(`.main-tab-btn[data-id="${id}"]`);
      mainTab.classList.add("active");
      // 激活当前子选项卡
      e.target.classList.add("active");
      // 激活对应的子内容
      const targetChildContent = document.querySelector(e.target.dataset.tabValue);
      if (targetChildContent) {
        targetChildContent.classList.add('active');
      }
  })
})

// 子内容切换逻辑
childTabsBtn.forEach(tab => {
  tab.addEventListener('click', () => {
    const target = document.querySelector(tab.dataset.tabValue);
    childTabsContent.forEach(tabInfo => {
      tabInfo.classList.remove('active')
    })
    target.classList.add('active');
  })
})

1. 新增ResetChildContents函数，统一重置子内容的激活状态，避免状态残留
2. 主选项卡点击事件中：
   • 同步重置子内容状态
   • 通过data-id匹配当前主选项卡对应的第一个子选项卡，为其添加active类
   • 根据子选项卡的data-tab-value，激活对应的子内容
3. 优化子选项卡点击事件，新增子内容状态重置逻辑，确保状态一致性

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