Tad Tabs

快速開始

只需引入兩個檔案，在 HTML 加上 data-tad 屬性，即可自動初始化。

1. 引入檔案

<link rel="stylesheet" href="tad-tabs.css">
<script src="tad-tabs.js"></script>

2. HTML 結構

<!-- data-tad 屬性觸發自動初始化 -->
<div id="my-tabs" data-tad>

  <!-- 頁籤標題：直接子元素 <ul> -->
  <ul>
    <li>頁籤一</li>
    <li>頁籤二</li>
    <li>頁籤三</li>
  </ul>

  <!-- 頁籤內容：與 <ul> 同層的 <div>，順序對應 -->
  <div>頁籤一的內容</div>
  <div>頁籤二的內容</div>
  <div>頁籤三的內容</div>

</div>

3. 透過 JavaScript 初始化（可選）

// 手動初始化單一元素
const tabs = new TadTabs('#my-tabs', {
  type:       'default',  // 'default' | 'vertical' | 'accordion'
  activation: 'manual',   // 'manual' | 'auto'
  activate: function(index, tabEl, panelEl) {
    console.log('已切換至頁籤', index);
  }
});

// 批次初始化所有含 data-tad 屬性的元素
TadTabs.init();

// jQuery 方式
$('#my-tabs').tadTabs({ type: 'vertical' });

水平頁籤（預設）

螢幕寬度超過 768 px 時顯示水平頁籤，低於時自動切換為折疊面板。

HTML 程式碼

<div id="demo1" data-tad data-tad-type="default">
  <ul>
    <li>🏠 首頁</li>
    <li>📋 關於</li>
    <li>⚙️ 設定</li>
  </ul>
  <div>首頁內容…</div>
  <div>關於內容…</div>
  <div>設定內容…</div>
</div>

垂直頁籤

頁籤標題列顯示於左側，同樣在窄螢幕下自動切換為折疊面板。

HTML 程式碼

<div data-tad data-tad-type="vertical">
  <ul>
    <li>蘋果</li>
    <li>檸檬</li>
  </ul>
  <div>蘋果內容…</div>
  <div>檸檬內容…</div>
</div>

折疊面板（Accordion）

永遠以折疊面板形式呈現，不受螢幕寬度影響。

可收合的折疊面板

加上 data-tad-closed="accordion" 允許點擊已展開項目時收合。

<div
  data-tad
  data-tad-type="accordion"
  data-tad-closed="accordion"
>
  ...
</div>

響應式自動切換

透過 data-tad-breakpoint 自訂切換點。縮小瀏覽器視窗可觀察從頁籤切換為折疊面板的效果。

<!-- 視窗寬度 ≤ 900 px 時切換為折疊面板 -->
<!-- data-tad-activation="auto" 啟用方向鍵自動切換頁籤 -->
<div
  data-tad
  data-tad-type="default"
  data-tad-breakpoint="900"
  data-tad-activation="auto"
>
  ...
</div>

選項參數

可透過 JavaScript 物件或 HTML data-* 屬性兩種方式傳入。

公開 API

JavaScript 使用範例

const tabs = new TadTabs('#my-tabs', {
  type: 'default',
  activate(index, tabEl, panelEl) {
    console.log(`已切換至第 ${index + 1} 個頁籤`);
  }
});

// 切換至第 3 個頁籤（索引 2）
tabs.activate(2);

// 下一個 / 上一個（可鏈式）
tabs.next().next();

// 讀取當前索引
console.log(tabs.getActive());  // → 4

// 清除並重建
tabs.destroy();
const newTabs = new TadTabs('#my-tabs', { type: 'accordion' });

鍵盤導覽說明

完整實作 ARIA APG 頁籤與折疊面板的鍵盤互動規範，並修正 DOM 結構造成的 Tab 順序問題。

頁籤模式（水平 / 垂直）

折疊面板模式（Accordion）

無障礙設計說明

符合的 WCAG 2.2 成功準則

• SC 1.3.1 資訊與關聯 — role、aria-controls、aria-labelledby 正確關聯頁籤與內容
• SC 1.4.6 對比度（增強型）AAA — 文字與背景對比 ≥ 7:1
• SC 1.4.11 非文字對比 — 邊框、圖示等 UI 元件對比 ≥ 3:1
• SC 2.1.1 鍵盤 — 所有功能均可純鍵盤操作
• SC 2.1.3 鍵盤（無例外）AAA — 無任何功能需要滑鼠路徑移動
• SC 2.4.3 焦點順序 — Tab 順序與視覺順序一致且符合邏輯
• SC 2.4.7 焦點可見 — 所有互動元素具備明顯焦點指示器
• SC 2.4.11 焦點不被遮蔽（最低）AA — 焦點元素不被固定元素完全遮蓋
• SC 2.4.13 焦點外觀 AAA — 焦點指示器 ≥ 3px 外框，對比 ≥ 3:1
• SC 2.5.5 目標尺寸（增強型）AAA — 最小點擊目標 44×44 CSS px
• SC 2.3.3 動畫（三次閃爍）AAA — 尊重 prefers-reduced-motion，停用裝飾動畫
• SC 4.1.2 名稱、角色、值 — 所有元件具備正確 ARIA 名稱與狀態

ARIA 屬性說明

讀報軟體（NVDA）使用提示

從 easyResponsiveTabs 遷移

Tad Tabs 提供 easyResponsiveTabs jQuery 相容介面，大多數情況只需更換引入檔案。

方法一：直接替換（需 jQuery）

將引入的 JS/CSS 換成 Tad Tabs，既有的 jQuery 呼叫方式完全相容：

<!-- 舊 -->
<link rel="stylesheet" href="easy-responsive-tabs.css">
<script src="easyResponsiveTabs.js"></script>

<!-- 新：只換這兩行 -->
<link rel="stylesheet" href="tad-tabs.css">
<script src="tad-tabs.js"></script>

// 既有呼叫方式無需更改：
$('#my-tabs').easyResponsiveTabs({
  type: 'default',
  activate: function() { ... }
});

方法二：改用 Tad Tabs 原生 API

建議逐步改用原生 API，以獲得完整功能並移除 jQuery 相依：

HTML 結構變更

不需要 class="resp-tabs-list" 或 class="resp-tabs-container"，直接使用乾淨的 <ul> 和 <div>：

<!-- 舊結構 -->
<div id="my-tabs">
  <ul class="resp-tabs-list">
    <li>頁籤一</li>
  </ul>
  <div class="resp-tabs-container">
    <div>內容一</div>
  </div>
</div>

<!-- 新結構（推薦）-->
<div id="my-tabs" data-tad>
  <ul>
    <li>頁籤一</li>
  </ul>
  <div>內容一</div>
</div>