构建动态嵌套选项卡：实现点击主选项卡显示子选项卡及内容-js教程-PHP中文网

构建动态嵌套选项卡：实现点击主选项卡显示子选项卡及内容

DDD

发布： 2025-10-27 13:59:22

原创

578人浏览过

构建动态嵌套选项卡：实现点击主选项卡显示子选项卡及内容

本文详细介绍了如何使用html、css和纯javascript构建一个两级动态选项卡界面。核心在于实现点击主选项卡（如“apps”）时，动态显示第二层子选项卡（如“app 1”、“app 2”、“app 3”），并默认激活其中一个子选项卡及其内容，同时确保在点击其他主选项卡时隐藏子选项卡，从而优化用户体验和界面布局。

在现代网页设计中，选项卡（Tabs）是组织和展示大量内容常用且高效的交互组件。当内容层级复杂时，我们可能需要实现嵌套选项卡，即点击一个主选项卡后，显示与之相关的第二层子选项卡。本教程将指导您如何通过HTML结构、CSS样式和JavaScript逻辑，实现一个功能完善的两级动态选项卡系统，特别关注子选项卡的按需显示与默认激活。

HTML 结构设计

首先，我们需要构建基础的HTML骨架，包括主选项卡行、子选项卡行以及各自对应的内容区域。关键在于合理组织内容，确保选项卡与内容之间通过 id 和 onclick 事件关联。

Fireflies.ai

自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

145

查看详情

<!-- 引入 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>

登录后复制

以上就是构建动态嵌套选项卡：实现点击主选项卡显示子选项卡及内容的详细内容，更多请关注php中文网其它相关文章！