选项卡

JavaScript

选项卡是帮助您在一个容器中组织和导航多个文档的元素。它们可用于在容器中的项目之间切换。

基础知识

选项卡界面有两个部分：选项卡本身和每个选项卡的内容。选项卡是一个具有 .tabs 类的元素，每个项目都有 .tabs-title 类。每个选项卡都包含指向选项卡的链接。每个链接的 href 应与选项卡的 ID 相匹配。或者，可以使用 data-tabs-target 属性指定 ID。

<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 data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>

选项卡内容容器具有 .tabs-content 类，而每个部分都有 .tabs-panel 类。每个内容窗格也有一个唯一的 ID，选项卡条中的链接会指向该 ID。

在视频中观看此部分

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
  </div>
</div>

把它们放在一起，我们得到这个

选项卡 1
选项卡 2
选项卡 3
选项卡 4
选项卡 5
选项卡 6

一

看看我！我是一个带有文本内容的超级酷的选项卡面板！

我是一个链接，但不做任何事情

二

三

看看我！我是一个带有文本内容的超级酷的选项卡面板！

四

五

看看我！我是一个带有文本内容的超级酷的选项卡面板！

六

垂直选项卡

将 .vertical 类添加到选项卡条和选项卡内容以垂直堆叠选项卡。您还可以从包装 div 中删除 .grid-margin-x 类，使它们并排放置。

在视频中观看此部分

<div class="grid-container">
  <div class="grid-x">
    <div class="cell medium-3">
      <ul class="vertical tabs" data-tabs id="example-tabs">
        <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
        <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
        <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
        <li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
        <li class="tabs-title"><a href="#panel5v">Tab 5</a></li>
        <li class="tabs-title"><a href="#panel6v">Tab 6</a></li>
      </ul>
    </div>
    <div class="cell medium-9">
      <div class="tabs-content vertical" data-tabs-content="example-tabs">
        <div class="tabs-panel is-active" id="panel1v">
          <p>One</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel2v">
          <p>Two</p>
          <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
        </div>
        <div class="tabs-panel" id="panel3v">
          <p>Three</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel4v">
          <p>Four</p>
          <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
        </div>
        <div class="tabs-panel" id="panel5v">
          <p>Five</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel6v">
          <p>Six</p>
          <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
        </div>
      </div>
    </div>
  </div>
</div>

选项卡 1
选项卡 2
选项卡 3
选项卡 4
选项卡 5
选项卡 6

一

看看我！我是一个带有文本内容的超级酷的选项卡面板！

二

三

看看我！我是一个带有文本内容的超级酷的选项卡面板！

四

五

看看我！我是一个带有文本内容的超级酷的选项卡面板！

六

折叠选项卡

将 data-active-collapse="true" 属性添加到选项卡条以折叠活动选项卡。

<ul class="tabs" data-active-collapse="true" data-tabs id="collapsing-tabs">
  <li class="tabs-title is-active"><a href="#panel1c" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2c">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3c">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4c">Tab 4</a></li>
</ul>

<div class="tabs-content" data-tabs-content="collapsing-tabs">
  <div class="tabs-panel is-active" id="panel1c">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="tabs-panel" id="panel2c">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>
  <div class="tabs-panel" id="panel3c">
    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
  </div>
  <div class="tabs-panel" id="panel4c">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

选项卡 1
选项卡 2
选项卡 3
选项卡 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

选项卡和 URL

浏览器历史记录

当 data-deep-link 选项设置为 true 时，将在选项卡打开时通过在浏览器 URL 中添加带有选项卡面板 ID 的哈希值来记录选项卡集的当前状态。默认情况下，选项卡会*替换*浏览器历史记录（使用 history.replaceState()）。使用 data-update-history="true" 属性修改此行为以*追加*到浏览器历史记录（使用 history.pushState()）。在后一种情况下，浏览器后退按钮将跟踪打开选项卡面板的每次点击。

通过使用深度链接（见下文），可以通过复制粘贴浏览器 URL 来共享页面选项卡集的打开状态。

深度链接

将 data-deep-link="true" 属性添加到选项卡条以

在点击选项卡时修改浏览器历史记录
允许用户在页面加载时使用附加哈希值的 URL 打开特定选项卡

在视频中观看此部分

<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" data-tabs id="deeplinked-tabs">
  <li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3d">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4d">Tab 4</a></li>
</ul>

<div class="tabs-content" data-tabs-content="deeplinked-tabs">
  <div class="tabs-panel is-active" id="panel1d">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="tabs-panel" id="panel2d">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>
  <div class="tabs-panel" id="panel3d">
    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
  </div>
  <div class="tabs-panel" id="panel4d">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

选项卡 1
选项卡 2
选项卡 3
选项卡 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

例如，https://example.com/#panel3d 将在页面加载时打开第三个选项卡面板。此示例将打开一个新的浏览器选项卡并滚动到打开的选项卡。

当直接链接到选项卡面板时，内容出现在选项卡面板中可能并不明显。另一个属性 data-deep-link-smudge 在深度链接（到水平选项卡集）后稍微向上滚动页面，以便选项卡条位于视口的顶部。

<ul class="tabs" data-deep-link="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="600" data-tabs id="deeplinked-tabs-with-smudge">

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$tab-margin`	数字	`0`	选项卡栏的默认边距。
`$tab-background`	颜色	`$white`	选项卡栏的默认背景颜色。
`$tab-color`	颜色	`$primary-color`	选项卡项目的字体颜色。
`$tab-background-active`	颜色	`$light-gray`	选项卡栏的活动背景颜色。
`$tab-active-color`	颜色	`$primary-color`	选项卡项目的活动字体颜色。
`$tab-item-font-size`	数字	`rem-calc(12)`	选项卡项目的字体大小。
`$tab-item-background-hover`		`$white`	菜单中项目的默认悬停背景颜色。
`$tab-item-padding`	数字	`1.25rem 1.5rem`	选项卡项目的默认填充。
`$tab-content-background`	颜色	`$white`	选项卡内容的默认背景颜色。
`$tab-content-border`	颜色	`$light-gray`	选项卡内容的默认边框颜色。
`$tab-content-color`	颜色	`$body-font-color`	选项卡内容的默认文本颜色。
`$tab-content-padding`	数字或列表	`1rem`	选项卡内容的默认填充。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用这些混合来从我们的组件中构建自己的类结构。

tabs-container

@include tabs-container;

添加选项卡容器的样式。将此应用于 <ul>。

tabs-container-vertical

@include tabs-container-vertical;

增强选项卡容器以具有垂直选项卡。与 tabs-container() 结合使用。

tabs-title

@include tabs-title;

为选项卡容器内的链接添加样式。将此应用于选项卡容器内的 <li> 元素。

tabs-content

@include tabs-content;

为环绕选项卡组内容窗格的包装器添加样式。

tabs-content-vertical

@include tabs-content-vertical;

通过移动边框来增强选项卡内容容器以具有垂直样式。与 tabs-content() 结合使用。

tabs-panel

@include tabs-panel;

为选项卡内容容器内的单个选项卡内容面板添加样式。

JavaScript 参考

初始化

您的 JavaScript 中必须包含以下文件才能使用此插件

foundation.core.js
foundation.tabs.js
- 使用实用程序库 foundation.util.keyboard.js
- 使用实用程序库 foundation.util.imageLoader.js

Foundation.Tabs

创建一个选项卡的新实例。

var elem = new Foundation.Tabs(element, options);

触发这些事件： Tabs#event:init

名称	类型	描述
`元素`	jQuery	要转换为选项卡的 jQuery 对象。
`选项`	对象	覆盖默认插件设置。

插件选项

使用这些选项来自定义 Tabs 的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性，或作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-deep-link`	`布尔值`	`false`	将位置哈希链接到活动窗格。在活动窗格更改时设置位置哈希，并在位置更改时打开相应的窗格。
`data-deep-link-smudge`	`布尔值`	`false`	如果启用了 `deepLink`，则调整深度链接滚动以确保选项卡面板的顶部可见
`data-deep-link-smudge-delay`	`数字`	`300`	如果启用了 `deepLinkSmudge`，则深度链接调整的动画时间（毫秒）
`data-deep-link-smudge-offset`	`数字`	`0`	如果启用了 `deepLinkSmudge`，则深度链接调整的动画偏移量
`data-update-history`	`布尔值`	`false`	如果启用了 `deepLink`，则使用打开的选项卡更新浏览器历史记录
`data-auto-focus`	`布尔值`	`false`	允许窗口在加载时滚动到活动窗格的内容。如果每页有多个选项卡面板，则不建议使用。
`data-wrap-on-keys`	`布尔值`	`true`	允许键盘输入“环绕”选项卡链接。
`data-match-height`	`布尔值`	`false`	如果设置为 true，则允许选项卡内容窗格匹配高度。
`data-active-collapse`	`布尔值`	`false`	允许活动选项卡在单击时折叠。
`data-link-class`	`字符串`	`tabs-title`	应用于选项卡链接列表中 `li` 的类。
`data-link-active-class`	`字符串`	`is-active`	应用于选项卡链接列表中活动 `li` 的类。
`data-panel-class`	`字符串`	`tabs-panel`	应用于内容容器的类。
`data-panel-active-class`	`字符串`	`is-active`	应用于活动内容容器的类。

事件

这些事件将从任何附加了 Tabs 插件的元素中触发。

名称	描述
`deeplink.zf.tabs`	在页面加载时插件进行深度链接时触发
`change.zf.tabs`	在插件成功更改选项卡时触发。
`collapse.zf.tabs`	在插件成功折叠选项卡时触发。

方法

_handleTabChange

$('#element').foundation('_handleTabChange', $target, historyHandled);

打开由 $target 定义的选项卡 $targetContent。折叠活动选项卡。

触发这些事件： Tabs#event:change

名称	类型	描述
`$target`	jQuery	要打开的选项卡。
`historyHandled`	布尔值	浏览器已处理历史记录更新

_openTab

$('#element').foundation('_openTab', $target);

打开由 $target 定义的选项卡 $targetContent。

名称	类型	描述
`$target`	jQuery	要打开的选项卡。

_collapseTab

$('#element').foundation('_collapseTab', $target);

折叠由 $target 定义的 $targetContent。

名称	类型	描述
`$target`	jQuery	要折叠的选项卡。

_collapse

$('#element').foundation('_collapse');

折叠活动的选项卡。

触发以下事件： Tabs#event:collapse

selectTab

$('#element').foundation('selectTab', elem, historyHandled);

用于选择要显示的内容窗格的公共方法。

名称	类型	描述
`elem`	jQuery	要显示的窗格的 jQuery 对象或 id 字符串。
`historyHandled`	布尔值	浏览器已处理历史记录更新

_destroy

$('#element').foundation('_destroy');

销毁一个选项卡实例。

触发以下事件： Tabs#event:destroyed