HTML/CSS/JS多层Tab问题：点击Apps才显示子Tab并默认激活App1

直接给你一套可运行的实现方案，完美匹配你的需求：

1. HTML 结构 #

先把主Tab、子Tab和卡片的层级理清楚，子Tab和对应卡片统一放在一个容器里，默认隐藏：

<!-- 主Tab栏 -->
<div class="main-tabs">
  <button class="main-tab" data-tab="home">Home</button>
  <button class="main-tab active" data-tab="apps">Apps</button>
  <button class="main-tab" data-tab="settings">Settings</button>
</div>

<!-- 子Tab栏 + 卡片容器，默认隐藏 -->
<div class="sub-tabs-container" id="subTabsContainer">
  <!-- 子Tab栏 -->
  <div class="sub-tabs">
    <button class="sub-tab active" data-subtab="app1">app1</button>
    <button class="sub-tab" data-subtab="app2">app2</button>
    <button class="sub-tab" data-subtab="app3">app3</button>
  </div>
  <!-- 卡片内容 -->
  <div class="card-container">
    <div class="card active" id="app1-card">app1 对应的卡片内容</div>
    <div class="card" id="app2-card">app2 对应的卡片内容</div>
    <div class="card" id="app3-card">app3 对应的卡片内容</div>
  </div>
</div>

<!-- 其他主Tab对应的内容（示例） -->
<div class="main-content">
  <div class="main-content-item active" id="home-content">Home 页面内容</div>
  <div class="main-content-item" id="apps-content"></div> <!-- Apps的内容由子Tab卡片承载 -->
  <div class="main-content-item" id="settings-content">Settings 页面内容</div>
</div>

2. CSS 样式 #

核心是默认隐藏子Tab容器，只有当主Tab的Apps处于激活状态时才显示：

/* 基础样式重置 */
button {
  padding: 8px 16px;
  margin-right: 4px;
  cursor: pointer;
  border: none;
  background: #f0f0f0;
}
button.active {
  background: #2196F3;
  color: white;
}

/* 主Tab样式 */
.main-tabs {
  margin-bottom: 16px;
}

/* 子Tab容器：默认隐藏 */
.sub-tabs-container {
  display: none;
  margin-bottom: 16px;
}
/* 当主Tab的Apps激活时，显示子Tab容器 */
.main-tabs .main-tab[data-tab="apps"].active ~ .sub-tabs-container {
  display: block;
}

/* 卡片样式：默认隐藏，只有激活的卡片显示 */
.card {
  display: none;
  padding: 20px;
  border: 1px solid #eee;
}
.card.active {
  display: block;
}

/* 其他主内容样式 */
.main-content-item {
  display: none;
  padding: 20px;
  border: 1px solid #eee;
}
.main-content-item.active {
  display: block;
}

3. JavaScript 逻辑 #

处理主Tab切换、子Tab切换，以及点击Apps时默认激活app1的逻辑：

// 获取元素
const mainTabs = document.querySelectorAll('.main-tab');
const subTabs = document.querySelectorAll('.sub-tab');
const cards = document.querySelectorAll('.card');
const mainContentItems = document.querySelectorAll('.main-content-item');

// 主Tab点击事件
mainTabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有主Tab和主内容的激活状态
    mainTabs.forEach(t => t.classList.remove('active'));
    mainContentItems.forEach(item => item.classList.remove('active'));
    
    // 激活当前主Tab和对应内容
    tab.classList.add('active');
    const tabId = tab.dataset.tab;
    document.getElementById(`${tabId}-content`).classList.add('active');
    
    // 如果点击的是Apps Tab，默认激活第一个子Tab和对应卡片
    if (tabId === 'apps') {
      subTabs.forEach(t => t.classList.remove('active'));
      cards.forEach(c => c.classList.remove('active'));
      subTabs[0].classList.add('active');
      cards[0].classList.add('active');
    }
  });
});

// 子Tab点击事件
subTabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有子Tab和卡片的激活状态
    subTabs.forEach(t => t.classList.remove('active'));
    cards.forEach(c => c.classList.remove('active'));
    
    // 激活当前子Tab和对应卡片
    tab.classList.add('active');
    const subTabId = tab.dataset.subtab;
    document.getElementById(`${subTabId}-card`).classList.add('active');
  });
});

关键说明 #

• 子Tab容器默认通过display:none隐藏，只有当Apps主Tab处于active状态时，通过CSS相邻兄弟选择器~触发显示，这是解决你“无法隐藏第二层Tab”的核心。
• 点击Apps主Tab时，会自动重置子Tab状态，默认激活第一个子Tab（app1）和对应卡片。
• 所有切换逻辑基于active类的添加/移除，逻辑清晰，后续维护也方便。

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