垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 选项卡 ​

Foundation 选项卡（Tabs）是一种用于在多个内容面板之间切换的组件。本章将介绍选项卡的各种用法。

基本选项卡 ​

使用 .tabs 和 .tabs-content 创建基本选项卡：

html
<ul class="tabs" data-tabs id="example-tabs">
    <li class="tabs-title is-active">
        <a href="#panel1" aria-selected="true">选项卡 1</a>
    </li>
    <li class="tabs-title">
        <a href="#panel2">选项卡 2</a>
    </li>
    <li class="tabs-title">
        <a href="#panel3">选项卡 3</a>
    </li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel is-active" id="panel1">
        <p>这是第一个选项卡的内容。</p>
    </div>
    <div class="tabs-panel" id="panel2">
        <p>这是第二个选项卡的内容。</p>
    </div>
    <div class="tabs-panel" id="panel3">
        <p>这是第三个选项卡的内容。</p>
    </div>
</div>

垂直选项卡 ​

创建垂直方向的选项卡：

html
<div class="grid-x">
    <div class="cell medium-3">
        <ul class="tabs vertical" data-tabs id="vertical-tabs">
            <li class="tabs-title is-active">
                <a href="#vpanel1" aria-selected="true">选项卡 1</a>
            </li>
            <li class="tabs-title">
                <a href="#vpanel2">选项卡 2</a>
            </li>
            <li class="tabs-title">
                <a href="#vpanel3">选项卡 3</a>
            </li>
        </ul>
    </div>
    <div class="cell medium-9">
        <div class="tabs-content vertical" data-tabs-content="vertical-tabs">
            <div class="tabs-panel is-active" id="vpanel1">
                <p>垂直选项卡 1 的内容。</p>
            </div>
            <div class="tabs-panel" id="vpanel2">
                <p>垂直选项卡 2 的内容。</p>
            </div>
            <div class="tabs-panel" id="vpanel3">
                <p>垂直选项卡 3 的内容。</p>
            </div>
        </div>
    </div>
</div>

响应式选项卡 ​

在小屏幕上显示为折叠列表：

html
<ul class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" id="responsive-tabs">
    <li class="tabs-title is-active">
        <a href="#rpanel1" aria-selected="true">选项卡 1</a>
    </li>
    <li class="tabs-title">
        <a href="#rpanel2">选项卡 2</a>
    </li>
    <li class="tabs-title">
        <a href="#rpanel3">选项卡 3</a>
    </li>
</ul>

<div class="tabs-content" data-tabs-content="responsive-tabs">
    <div class="tabs-panel is-active" id="rpanel1">
        <p>在手机上会显示为折叠列表。</p>
    </div>
    <div class="tabs-panel" id="rpanel2">
        <p>在平板和电脑上显示为选项卡。</p>
    </div>
    <div class="tabs-panel" id="rpanel3">
        <p>试着调整浏览器窗口大小查看效果。</p>
    </div>
</div>

自定义样式 ​

边框选项卡 ​

html
<style>
    .tabs.bordered {
        border: 1px solid #e6e6e6;
        border-bottom: none;
    }
    .tabs.bordered .tabs-title > a {
        border: 1px solid transparent;
        border-bottom: none;
        margin-right: -1px;
    }
    .tabs.bordered .tabs-title.is-active > a {
        background: white;
        border: 1px solid #e6e6e6;
        border-bottom: 1px solid white;
        margin-bottom: -1px;
    }
    .tabs-content.bordered {
        border: 1px solid #e6e6e6;
    }
</style>

<ul class="tabs bordered" data-tabs id="bordered-tabs">
    <!-- 选项卡标题 -->
</ul>
<div class="tabs-content bordered" data-tabs-content="bordered-tabs">
    <!-- 选项卡内容 -->
</div>

药丸式选项卡 ​

html
<style>
    .tabs.pills .tabs-title > a {
        border-radius: 50px;
        padding: 0.5rem 1.5rem;
    }
    .tabs.pills .tabs-title.is-active > a {
        background: #1779ba;
        color: white;
    }
</style>

<ul class="tabs pills" data-tabs id="pills-tabs">
    <li class="tabs-title is-active">
        <a href="#pills1" aria-selected="true">选项 1</a>
    </li>
    <li class="tabs-title">
        <a href="#pills2">选项 2</a>
    </li>
    <li class="tabs-title">
        <a href="#pills3">选项 3</a>
    </li>
</ul>

彩色选项卡 ​

html
<style>
    .tabs.primary .tabs-title.is-active > a {
        background: #1779ba;
        color: white;
    }
    .tabs.success .tabs-title.is-active > a {
        background: #3adb76;
        color: white;
    }
</style>

带图标的选项卡 ​

html
<ul class="tabs" data-tabs id="icon-tabs">
    <li class="tabs-title is-active">
        <a href="#icon1" aria-selected="true">
            <i class="fi-home"></i> 首页
        </a>
    </li>
    <li class="tabs-title">
        <a href="#icon2">
            <i class="fi-torso"></i> 个人资料
        </a>
    </li>
    <li class="tabs-title">
        <a href="#icon3">
            <i class="fi-widget"></i> 设置
        </a>
    </li>
</ul>

深度链接 ​

支持 URL 哈希链接：

html
<ul class="tabs" data-tabs id="deep-link-tabs"
    data-deep-link="true"
    data-update-history="true"
    data-deep-link-smudge="true">
    <li class="tabs-title is-active">
        <a href="#overview" aria-selected="true">概述</a>
    </li>
    <li class="tabs-title">
        <a href="#features">功能特性</a>
    </li>
    <li class="tabs-title">
        <a href="#pricing">价格方案</a>
    </li>
</ul>

动态内容加载 ​

使用 AJAX 加载选项卡内容：

html
<ul class="tabs" data-tabs id="ajax-tabs">
    <li class="tabs-title is-active">
        <a href="#static" aria-selected="true">静态内容</a>
    </li>
    <li class="tabs-title">
        <a href="#dynamic" data-load-url="/api/content">动态加载</a>
    </li>
</ul>

<script>
$(document).ready(function() {
    $('[data-load-url]').on('click', function(e) {
        var url = $(this).data('load-url');
        var targetId = $(this).attr('href');

        $.get(url, function(data) {
            $(targetId).html(data);
        });
    });
});
</script>

配置选项 ​

html
<ul class="tabs" data-tabs
    data-deep-link="false"
    data-update-history="false"
    data-deep-link-smudge="false"
    data-deep-link-smudge-delay="300"
    data-auto-focus="true"
    data-wrap-on-keys="true"
    id="config-tabs">
    <!-- 选项卡 -->
</ul>
选项说明默认值
data-deep-link启用深度链接false
data-update-history更新浏览器历史false
data-auto-focus切换时自动聚焦true
data-wrap-on-keys键盘循环导航true

JavaScript API ​

方法 ​

javascript
// 获取实例
var tabs = new Foundation.Tabs($('#my-tabs'));

// 切换到指定面板
tabs.selectTab('#panel2');
tabs.selectTab($('#panel2'));
tabs.selectTab(1); // 索引

事件 ​

javascript
$('#my-tabs').on('change.zf.tabs', function(event, tab) {
    console.log('切换到:', tab);
});

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 选项卡示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        /* 药丸式 */
        .tabs.pills { background: none; border: none; }
        .tabs.pills .tabs-title > a {
            border-radius: 50px;
            padding: 0.5rem 1.5rem;
            background: #f4f4f4;
        }
        .tabs.pills .tabs-title.is-active > a {
            background: #1779ba;
            color: white;
        }

        /* 彩色 */
        .tabs.primary .tabs-title.is-active > a {
            background: #1779ba;
            color: white;
        }
        .tabs.success .tabs-title.is-active > a {
            background: #3adb76;
            color: white;
        }

        /* 带边框 */
        .tabs.bordered {
            border: 1px solid #e6e6e6;
            border-radius: 4px 4px 0 0;
            border-bottom: none;
        }
        .tabs.bordered .tabs-title > a {
            border-radius: 4px 4px 0 0;
        }
        .tabs-content.bordered {
            border: 1px solid #e6e6e6;
            border-radius: 0 0 4px 4px;
            padding: 20px;
        }

        /* 图标 */
        .tabs .tabs-title > a i {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 选项卡展示</h1>

        <div class="demo-section">
            <h3>基本选项卡</h3>
            <ul class="tabs" data-tabs id="basic-tabs">
                <li class="tabs-title is-active">
                    <a href="#basic1" aria-selected="true">选项卡 1</a>
                </li>
                <li class="tabs-title">
                    <a href="#basic2">选项卡 2</a>
                </li>
                <li class="tabs-title">
                    <a href="#basic3">选项卡 3</a>
                </li>
            </ul>
            <div class="tabs-content" data-tabs-content="basic-tabs">
                <div class="tabs-panel is-active" id="basic1">
                    <h4>第一个选项卡</h4>
                    <p>这是第一个选项卡的内容。Foundation 的选项卡组件非常易于使用。</p>
                </div>
                <div class="tabs-panel" id="basic2">
                    <h4>第二个选项卡</h4>
                    <p>这是第二个选项卡的内容。你可以在这里放置任何 HTML 元素。</p>
                </div>
                <div class="tabs-panel" id="basic3">
                    <h4>第三个选项卡</h4>
                    <p>这是第三个选项卡的内容。</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>带图标的选项卡</h3>
            <ul class="tabs" data-tabs id="icon-tabs">
                <li class="tabs-title is-active">
                    <a href="#icon1" aria-selected="true"><i class="fi-home"></i> 首页</a>
                </li>
                <li class="tabs-title">
                    <a href="#icon2"><i class="fi-torso"></i> 个人资料</a>
                </li>
                <li class="tabs-title">
                    <a href="#icon3"><i class="fi-widget"></i> 设置</a>
                </li>
                <li class="tabs-title">
                    <a href="#icon4"><i class="fi-mail"></i> 消息</a>
                </li>
            </ul>
            <div class="tabs-content" data-tabs-content="icon-tabs">
                <div class="tabs-panel is-active" id="icon1">
                    <p>首页内容...</p>
                </div>
                <div class="tabs-panel" id="icon2">
                    <p>个人资料内容...</p>
                </div>
                <div class="tabs-panel" id="icon3">
                    <p>设置内容...</p>
                </div>
                <div class="tabs-panel" id="icon4">
                    <p>消息内容...</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>药丸式选项卡</h3>
            <ul class="tabs pills" data-tabs id="pills-tabs">
                <li class="tabs-title is-active">
                    <a href="#pills1" aria-selected="true">所有</a>
                </li>
                <li class="tabs-title">
                    <a href="#pills2">已发布</a>
                </li>
                <li class="tabs-title">
                    <a href="#pills3">草稿</a>
                </li>
                <li class="tabs-title">
                    <a href="#pills4">已归档</a>
                </li>
            </ul>
            <div class="tabs-content" data-tabs-content="pills-tabs">
                <div class="tabs-panel is-active" id="pills1">
                    <p>显示所有内容...</p>
                </div>
                <div class="tabs-panel" id="pills2">
                    <p>显示已发布内容...</p>
                </div>
                <div class="tabs-panel" id="pills3">
                    <p>显示草稿内容...</p>
                </div>
                <div class="tabs-panel" id="pills4">
                    <p>显示已归档内容...</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>带边框选项卡</h3>
            <ul class="tabs bordered" data-tabs id="bordered-tabs">
                <li class="tabs-title is-active">
                    <a href="#bordered1" aria-selected="true">描述</a>
                </li>
                <li class="tabs-title">
                    <a href="#bordered2">规格参数</a>
                </li>
                <li class="tabs-title">
                    <a href="#bordered3">用户评价</a>
                </li>
            </ul>
            <div class="tabs-content bordered" data-tabs-content="bordered-tabs">
                <div class="tabs-panel is-active" id="bordered1">
                    <h4>产品描述</h4>
                    <p>这是产品的详细描述信息...</p>
                </div>
                <div class="tabs-panel" id="bordered2">
                    <h4>规格参数</h4>
                    <table>
                        <tr><td>尺寸</td><td>100 x 50 x 20 mm</td></tr>
                        <tr><td>重量</td><td>150g</td></tr>
                        <tr><td>颜色</td><td>黑色/白色</td></tr>
                    </table>
                </div>
                <div class="tabs-panel" id="bordered3">
                    <h4>用户评价</h4>
                    <p>暂无评价</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>垂直选项卡</h3>
            <div class="grid-x">
                <div class="cell medium-3">
                    <ul class="tabs vertical" data-tabs id="vertical-tabs">
                        <li class="tabs-title is-active">
                            <a href="#vpanel1" aria-selected="true">账户设置</a>
                        </li>
                        <li class="tabs-title">
                            <a href="#vpanel2">隐私设置</a>
                        </li>
                        <li class="tabs-title">
                            <a href="#vpanel3">通知设置</a>
                        </li>
                        <li class="tabs-title">
                            <a href="#vpanel4">安全设置</a>
                        </li>
                    </ul>
                </div>
                <div class="cell medium-9">
                    <div class="tabs-content vertical" data-tabs-content="vertical-tabs" style="border-left: 1px solid #e6e6e6; padding-left: 20px;">
                        <div class="tabs-panel is-active" id="vpanel1">
                            <h4>账户设置</h4>
                            <p>在这里管理您的账户信息...</p>
                        </div>
                        <div class="tabs-panel" id="vpanel2">
                            <h4>隐私设置</h4>
                            <p>控制您的隐私选项...</p>
                        </div>
                        <div class="tabs-panel" id="vpanel3">
                            <h4>通知设置</h4>
                            <p>管理通知偏好...</p>
                        </div>
                        <div class="tabs-panel" id="vpanel4">
                            <h4>安全设置</h4>
                            <p>增强账户安全...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>响应式选项卡</h3>
            <p class="text-muted">在小屏幕上显示为折叠列表，在大屏幕上显示为选项卡。</p>
            <ul class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" id="responsive-tabs">
                <li class="tabs-title is-active">
                    <a href="#rtab1" aria-selected="true">响应式 1</a>
                </li>
                <li class="tabs-title">
                    <a href="#rtab2">响应式 2</a>
                </li>
                <li class="tabs-title">
                    <a href="#rtab3">响应式 3</a>
                </li>
            </ul>
            <div class="tabs-content" data-tabs-content="responsive-tabs">
                <div class="tabs-panel is-active" id="rtab1">
                    <p>调整窗口大小查看效果变化。</p>
                </div>
                <div class="tabs-panel" id="rtab2">
                    <p>在手机上会变成折叠列表。</p>
                </div>
                <div class="tabs-panel" id="rtab3">
                    <p>在平板和电脑上保持选项卡样式。</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

选项卡最佳实践 ​

  1. 标签清晰：使用简短、描述性的标签
  2. 数量适中：建议不超过 5-7 个选项卡
  3. 默认选项：选择最常用的作为默认激活项
  4. 可访问性：确保键盘可以操作
  5. 响应式：考虑在小屏幕上的显示效果

总结 ​

本章我们学习了：

  • 基本选项卡的创建
  • 垂直选项卡
  • 响应式选项卡
  • 自定义样式（边框、药丸式、彩色）
  • 带图标的选项卡
  • 深度链接
  • JavaScript API

下一章，我们将学习 Foundation 分页。

提示：选项卡是组织相关内容的好方法，但不要过度使用，确保每个选项卡的内容确实需要分开展示。