手册

Foundation 5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation Magellan Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

首页大前端 Foundation Foundation 中文手册

Foundation 选项卡

阅读22181

更新时间2022-04-14

Foundation 列表

Foundation 分页

选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。

选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。

提示: 当前选中项可以使用 .active 类。

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>选项卡</h2>
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#">Home</a></li>
  <li class="tab-title"><a href="#">Menu 1</a></li>
  <li class="tab-title"><a href="#">Menu 2</a></li>
  <li class="tab-title"><a href="#">Menu 3</a></li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

垂直的选项卡

垂直选项卡可以使用 .vertical 类:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>垂直选项卡</h2>
<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#">Home</a></li>
  <li class="tab-title"><a href="#">Menu 1</a></li>
  <li class="tab-title"><a href="#">Menu 2</a></li>
  <li class="tab-title"><a href="#">Menu 3</a></li>
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

切换选项卡

如果要设置切换标签，可以使用 <div> 元素加上 .content 类。每个选项卡上加上唯一的 ID, 并连接到列表项 (<a href="#menu1" 将打开 id="menu1" 的选项内容)。最后将所有的选项内容放在 <div> 元素上，该 <div> 元素需要添加 .tabs-content 类，并初始化 Foundation JS。

注意 .active 类会自动添加到当前选中的选项卡上：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<h2>切换选项卡</h2>

<ul class="tabs" data-tab="">
  <li class="tab-title"><a href="#home" aria-selected="false" tabindex="-1">主页</a></li>
  <li class="tab-title"><a href="#menu1" aria-selected="false" tabindex="-1">菜单 1</a></li>
  <li class="tab-title active"><a href="#menu2" aria-selected="true" tabindex="0">菜单 2</a></li>
  <li class="tab-title"><a href="#menu3" aria-selected="false" tabindex="-1">菜单 3</a></li>
</ul>
<div class="tabs-content">
  <div class="content" id="home" aria-hidden="true" tabindex="-1">
    <h3>主页</h3>
    <p>主页内容..</p>
  </div>
  <div class="content" id="menu1" aria-hidden="true" tabindex="-1">
    <h3>菜单 1</h3>
    <p>一些文本内容 1</p>
  </div>
  <div class="content active" id="menu2" aria-hidden="false">
    <h3>菜单 2</h3>
    <p>一些文本内容 2</p>
  </div>
  <div class="content" id="menu3" aria-hidden="true" tabindex="-1">
    <h3>菜单 3</h3>
    <p>一些文本内容 3</p>
  </div>
</div>

<!--初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

选项卡淡入

使用 CSS 来自定义选项卡淡入的效果：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
<style>
.tabs-content > .content.active {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
</style>
</head>
<body style="padding:20px">

<h2>淡入切换选项卡</h2>
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#home">主页</a></li>
  <li class="tab-title"><a href="#menu1">菜单 1</a></li>
  <li class="tab-title"><a href="#menu2">菜单 2</a></li>
  <li class="tab-title"><a href="#menu3">菜单 3</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="home">
    <h3>HOME</h3>
    <p>首页内容。</p>
  </div>
  <div class="content" id="menu1">
    <h3>菜单 1</h3>
    <p>文本内容。</p>
  </div>
  <div class="content" id="menu2">
    <h3>菜单 2</h3>
    <p>文本内容。</p>
  </div>
  <div class="content" id="menu3">
    <h3>菜单 3</h3>
    <p>文本内容。</p>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Foundation 列表

Foundation 分页