本文详细介绍了如何使用html、css和纯javascript构建一个两级动态选项卡界面。核心在于实现点击主选项卡（如“apps”）时，动态显示第二层子选项卡（如“app 1”、“app 2”、“app 3”），并默认激活其中一个子选项卡及其内容，同时确保在点击其他主选项卡时隐藏子选项卡，从而优化用户体验和界面布局。
在现代网页设计中，选项卡（Tabs）是组织和展示大量内容常用且高效的交互组件。当内容层级复杂时，我们可能需要实现嵌套选项卡，即点击一个主选项卡后，显示与之相关的第二层子选项卡。本教程将指导您如何通过HTML结构、CSS样式和JavaScript逻辑，实现一个功能完善的两级动态选项卡系统，特别关注子选项卡的按需显示与默认激活。
HTML 结构设计
首先，我们需要构建基础的HTML骨架，包括主选项卡行、子选项卡行以及各自对应的内容区域。关键在于合理组织内容，确保选项卡与内容之间通过 id 和 onclick 事件关联。
<!-- 引入 jQuery 库，尽管核心逻辑使用纯JS，但若有其他jQuery依赖，仍需引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Heading">
<h2>Sessions</h2>
</div>
<br/>
<!-- 主选项卡容器 -->
<div class="tab">
<div class="tab_items" style="margin-left: 60px;">
<button class="tablinks" onclick="openApp(event, 'date')" id="defaultOpen">By Date</button>
<button class="tablinks" onclick="openApp(event, 'Podcasts')">Podcasts</button>
<button class="tablinks" onclick="openApp(event, 'product')">Mktng</button>
<button class="tablinks" onclick="openApp(event, 'app')">Apps</button> <!-- 主"Apps"选项卡 -->
<button class="tablinks" onclick="openApp(event, 'tools')">Tools</button>
<button class="tablinks" onclick="openApp(event, 'stories')">Stories</button>
</div>
</div>
<!-- 子选项卡容器，初始时隐藏 -->
<div class="row">
<div class="tab-row content"> <!-- 使用 .content 类以便CSS控制显示/隐藏 -->
<button class="tablinks" onclick="openApp(event, 'app1')">App 1</button>
<button class="tablinks" onclick="openApp(event, 'app2')">App 2</button>
<button class="tablinks" onclick="openApp(event, 'app3')">App 3</button>
</div>
</div>
<!-- 选项卡内容区域 -->
<div id="date" class="tabcontent">
<!-- "By Date" 选项卡的内容 -->
<div class="row">
<ul class="courses">
<li><a class="product"><b>2023</b></a>
<ul>
<li><a href="" class="course" target="_blank">Lorem Ipsum</a></li>
<li><a href="" class="course" target="_blank">Lorem Ipsum</a></li>
<li><a href="" class="course" target="_blank">Lorem Ipsum</a></li>
</ul> 
