標籤頁

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，由標籤頁中的連結所指向。

觀看影片中的此部分

<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.

標籤和網址

瀏覽器記錄

當 data-deep-link 選項設為 true 時，標籤集的當前狀態會透過在標籤開啟時將一個帶有標籤面板 ID 的雜湊新增到瀏覽器網址中來記錄。預設情況下，標籤會取代瀏覽器記錄（使用 history.replaceState()）。透過使用屬性 data-update-history="true" 來附加到瀏覽器記錄（使用 history.pushState()），來修改此行為。在後一種情況下，瀏覽器返回按鈕將追蹤開啟每個標籤面板的點擊。

透過使用深度連結（見下方），可以透過複製貼上瀏覽器網址來分享頁面標籤集的開啟狀態。

深度連結

將屬性 data-deep-link="true" 新增到標籤列，以

在點擊標籤時修改瀏覽器記錄
讓使用者可以在頁面載入時透過附加雜湊的網址開啟特定標籤

觀看影片中的此部分

<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`	Menu 中項目預設背景顏色。
`$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

名稱	類型	說明
`element`	jQuery	要轉換成分頁的 jQuery 物件。
`options`	物件	覆寫預設的外掛程式設定。

外掛程式選項

使用這些選項自訂 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