Foundation 选项卡（Tabs）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把选项卡（Tabs）讲得明明白白！Foundation 6+ 的 Tabs 组件超级强大，支持水平/垂直选项卡、响应式（小屏自动变 Accordion）、深链接（URL 哈希切换）、动画等，常用于内容切换、产品详情页、后台管理等。
1. 基本水平 Tabs（最常用）
<ulclass="tabs"data-tabsid="example-tabs"><liclass="tabs-title is-active"><ahref="#panel1"aria-selected="true">Tab 1</a></li><liclass="tabs-title"><ahref="#panel2">Tab 2</a></li><liclass="tabs-title"><ahref="#panel3">Tab 3</a></li></ul><divclass="tabs-content"data-tabs-content="example-tabs"><divclass="tabs-panel is-active"id="panel1"><p>这里是 Tab 1 的内容</p></div><divclass="tabs-panel"id="panel2"><p>这里是 Tab 2 的内容</p></div><divclass="tabs-panel"id="panel3"><p>这里是 Tab 3 的内容</p></div></div>2. 垂直 Tabs（侧边选项卡）
<divclass="grid-x"><divclass="cell medium-3"><ulclass="tabs vertical"id="vertical-tabs"><liclass="tabs-title is-active"><ahref="#vpanel1">垂直 Tab 1</a></li><liclass="tabs-title"><ahref="#vpanel2">垂直 Tab 2</a></li></ul></div><divclass="cell medium-9"><divclass="tabs-content"data-tabs-content="vertical-tabs"><divclass="tabs-panel is-active"id="vpanel1">垂直内容1</div><divclass="tabs-panel"id="vpanel2">垂直内容2</div></div></div></div>3. 响应式 Tabs（大屏 Tabs，小屏变 Accordion！超级实用）
加data-responsive-accordion-tabs属性：
<ulclass="tabs"data-tabsdata-responsive-accordion-tabs="tabs medium-accordion large-tabs"id="responsive-tabs"><!-- tabs-title 同上 --></ul><divclass="tabs-content"data-tabs-content="responsive-tabs"><!-- tabs-panel 同上 --></div>medium-accordion：中等屏幕以下变 Accordionlarge-tabs：大屏保持 Tabs
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation Tabs 选项卡全家福</h3><!-- 基本水平 Tabs --><ulclass="tabs"data-tabsid="basic-tabs"><liclass="tabs-title is-active"><ahref="#panel1">基本 Tab 1</a></li><liclass="tabs-title"><ahref="#panel2">基本 Tab 2</a></li><liclass="tabs-title"><ahref="#panel3">基本 Tab 3</a></li></ul><divclass="tabs-content"data-tabs-content="basic-tabs"><divclass="tabs-panel is-active"id="panel1"><p>内容1：水平选项卡最常用！</p></div><divclass="tabs-panel"id="panel2"><p>内容2：可以放图片、表格、表单...</p></div><divclass="tabs-panel"id="panel3"><p>内容3：支持深链接 #panel3</p></div></div><!-- 响应式 Tabs（试试缩小浏览器看变 Accordion） --><ulclass="tabs"data-tabsdata-responsive-accordion-tabs="accordion medium-tabs"id="resp-tabs"style="margin-top:40px;"><liclass="tabs-title is-active"><ahref="#rpanel1">响应式 Tab 1</a></li><liclass="tabs-title"><ahref="#rpanel2">响应式 Tab 2</a></li></ul><divclass="tabs-content"data-tabs-content="resp-tabs"><divclass="tabs-panel is-active"id="rpanel1"><p>大屏 Tabs，小屏 Accordion！</p></div><divclass="tabs-panel"id="rpanel2"><p>超级适合移动端</p></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="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 布局”
我立刻给你写好！
