Foundation 选项卡（Tabs）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 选项卡（Tabs）讲得明明白白！Foundation 6+ 的 Tabs 组件超级强大，支持水平/垂直选项卡、响应式（小屏自动变 Accordion）、深链接（URL 哈希切换）、动画等，常用于内容切换、产品详情页、后台管理等。
1. 基本水平 Tabs（最常用）
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>这里是 Tab 1 的内容</p>
</div>
<div class="tabs-panel" id="panel2">
<p>这里是 Tab 2 的内容</p>
</div>
<div class="tabs-panel" id="panel3">
<p>这里是 Tab 3 的内容</p>
</div>
</div>2. 垂直 Tabs（侧边选项卡）
<div class="grid-x">
<div class="cell medium-3">
<ul class="tabs vertical" id="vertical-tabs">
<li class="tabs-title is-active"><a href="#vpanel1">垂直 Tab 1</a></li>
<li class="tabs-title"><a href="#vpanel2">垂直 Tab 2</a></li>
</ul>
</div>
<div class="cell medium-9">
<div class="tabs-content" data-tabs-content="vertical-tabs">
<div class="tabs-panel is-active" id="vpanel1">垂直内容1</div>
<div class="tabs-panel" id="vpanel2">垂直内容2</div>
</div>
</div>
</div>3. 响应式 Tabs（大屏 Tabs，小屏变 Accordion！超级实用）
加 data-responsive-accordion-tabs 属性：
<ul class="tabs" data-tabs data-responsive-accordion-tabs="tabs medium-accordion large-tabs" id="responsive-tabs">
<!-- tabs-title 同上 -->
</ul>
<div class="tabs-content" data-tabs-content="responsive-tabs">
<!-- tabs-panel 同上 -->
</div>medium-accordion：中等屏幕以下变 Accordionlarge-tabs：大屏保持 Tabs
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation Tabs 选项卡全家福</h3>
<!-- 基本水平 Tabs -->
<ul class="tabs" data-tabs id="basic-tabs">
<li class="tabs-title is-active"><a href="#panel1">基本 Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">基本 Tab 2</a></li>
<li class="tabs-title"><a href="#panel3">基本 Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="basic-tabs">
<div class="tabs-panel is-active" id="panel1"><p>内容1：水平选项卡最常用！</p></div>
<div class="tabs-panel" id="panel2"><p>内容2：可以放图片、表格、表单...</p></div>
<div class="tabs-panel" id="panel3"><p>内容3：支持深链接 #panel3</p></div>
</div>
<!-- 响应式 Tabs（试试缩小浏览器看变 Accordion） -->
<ul class="tabs" data-tabs data-responsive-accordion-tabs="accordion medium-tabs" id="resp-tabs" style="margin-top:40px;">
<li class="tabs-title is-active"><a href="#rpanel1">响应式 Tab 1</a></li>
<li class="tabs-title"><a href="#rpanel2">响应式 Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="resp-tabs">
<div class="tabs-panel is-active" id="rpanel1"><p>大屏 Tabs，小屏 Accordion！</p></div>
<div class="tabs-panel" id="rpanel2"><p>超级适合移动端</p></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方文档和项目中最标准的 Foundation Tabs 示例）：
官方文档（最新版）：
- Tabs：https://get.foundation/sites/docs/tabs.html
- Responsive Accordion Tabs：https://get.foundation/sites/docs/responsive-accordion-tabs.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是分页（Pagination）？
→ 帮我做一个产品详情页的 Tabs（规格、评价、售后）？
→ 给我一个垂直 Tabs + 内容区的完整布局？
直接回复下一句：
“明天讲 table”
“帮我做产品详情 Tabs”
“给我垂直 Tabs 布局”
我立刻给你写好！
