一、选项卡导航概述
选项卡导航用于在有限空间内展示多组内容，用户通过点击标签在内容面板之间切换，适合产品介绍、设置面板、内容分类等场景。
核心结构
| 元素 | 类 / 属性 | 作用 |
|---|---|---|
<ul> | .tabs + data-tab | 选项卡容器 |
<li> | .tab-title | 单个选项卡标签 |
<a> | href="#对应id" | 点击触发，关联内容面板 |
<div> 容器 | .tabs-content | 所有内容面板的包裹容器 |
<div> 面板 | .content + id | 单个内容面板，id 与 <a> 的 href 对应 |
.active | 添加在 <li> 和 .content 上 | 标记当前选中项 |
必须初始化 Foundation JS：
$(document).foundation();
二、基础选项卡导航
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#">首页</a></li>
<li class="tab-title"><a href="#">新闻</a></li>
<li class="tab-title"><a href="#">论坛</a></li>
<li class="tab-title"><a href="#">网购</a></li>
</ul>Code language: HTML, XML (xml)以上为基础样式，不包含内容切换功能。如需内容切换，请参考第四节。
三、垂直选项卡
在 .tabs 容器上添加 .vertical 类，即可将选项卡改为垂直排列，适合侧边栏导航：
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#">首页</a></li>
<li class="tab-title"><a href="#">新闻</a></li>
<li class="tab-title"><a href="#">论坛</a></li>
<li class="tab-title"><a href="#">网购</a></li>
</ul>Code language: HTML, XML (xml)四、带内容切换的选项卡
将选项卡与内容面板关联，实现点击切换效果：
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#home">Home</a></li>
<li class="tab-title"><a href="#menu1">Menu 1</a></li>
<li class="tab-title"><a href="#menu2">Menu 2</a></li>
<li class="tab-title"><a href="#menu3">Menu 3</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="home">
<h3>HOME</h3>
<p>Home is where the heart is..</p>
</div>
<div class="content" id="menu1">
<h3>Menu 1</h3>
<p>Some text, blabla</p>
</div>
<div class="content" id="menu2">
<h3>Menu 2</h3>
<p>Some other text.</p>
</div>
<div class="content" id="menu3">
<h3>Menu 3</h3>
<p>Last tab.</p>
</div>
</div>Code language: HTML, XML (xml)每个选项卡的
<a href="#id">与对应内容面板的id必须一致。为初始显示项添加.active类。
五、完整可运行示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foundation 选项卡导航示例</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
<script src="foundation-5.5.3/js/vendor/jquery.js"></script>
<script src="foundation-5.5.3/js/foundation.min.js"></script>
<script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
<style>
.tabs-content {
margin-bottom: 30px;
}
.content {
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}
</style>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<h3>基础选项卡导航</h3>
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#">首页</a></li>
<li class="tab-title"><a href="#">新闻</a></li>
<li class="tab-title"><a href="#">论坛</a></li>
<li class="tab-title"><a href="#">网购</a></li>
</ul>
<hr />
<h3>垂直选项卡</h3>
<div class="row">
<div class="medium-4 columns">
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#">首页</a></li>
<li class="tab-title"><a href="#">新闻</a></li>
<li class="tab-title"><a href="#">论坛</a></li>
<li class="tab-title"><a href="#">网购</a></li>
</ul>
</div>
</div>
<hr />
<h3>带内容切换的选项卡</h3>
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#home">Home</a></li>
<li class="tab-title"><a href="#menu1">Menu 1</a></li>
<li class="tab-title"><a href="#menu2">Menu 2</a></li>
<li class="tab-title"><a href="#menu3">Menu 3</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="home">
<h3>HOME</h3>
<p>Home is where the heart is..</p>
</div>
<div class="content" id="menu1">
<h3>Menu 1</h3>
<p>Some text, blabla</p>
</div>
<div class="content" id="menu2">
<h3>Menu 2</h3>
<p>Some other text.</p>
</div>
<div class="content" id="menu3">
<h3>Menu 3</h3>
<p>Last tab.</p>
</div>
</div>
<hr />
<h3>垂直选项卡 + 内容切换</h3>
<div class="row">
<div class="medium-3 columns">
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#vtab1">Tab 1</a></li>
<li class="tab-title"><a href="#vtab2">Tab 2</a></li>
<li class="tab-title"><a href="#vtab3">Tab 3</a></li>
</ul>
</div>
<div class="medium-9 columns">
<div class="tabs-content">
<div class="content active" id="vtab1">
<h3>垂直选项卡 1</h3>
<p>左侧为垂直排列的选项卡，右侧为对应的内容面板。</p>
</div>
<div class="content" id="vtab2">
<h3>垂直选项卡 2</h3>
<p>适合用于设置页面、后台管理系统侧边导航等场景。</p>
</div>
<div class="content" id="vtab3">
<h3>垂直选项卡 3</h3>
<p>点击左侧标签即可切换右侧内容。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)六、使用要点小结
| 功能 | 实现方式 |
|---|---|
| 创建选项卡 | <ul class="tabs" data-tab> + <li class="tab-title"> |
| 内容面板容器 | <div class="tabs-content"> |
| 单个内容面板 | <div class="content" id="id"> |
| 标签与内容关联 | <a href="#id"> 对应 <div id="id"> |
| 默认选中项 | 为 <li> 和 .content 同时添加 .active |
| 垂直选项卡 | .tabs.vertical |
| 垂直 + 内容切换 | 配合栅格系统左右布局 |
| JS 初始化 | $(document).foundation() |
