您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

jQuery 多組 Tab 切換邏輯：自定義屬性實現「點擊顯示對應、其餘隱藏」通用方案

編輯：程式設計綜合問答

頁面包含多組 `

` 項目，點擊 `

` 時需顯示對應的 `

` 並隱藏其他所有同類面板。核心技巧：**給所有面板統一自定義屬性 (如 `data-panel`)，點擊時先全隱藏再顯示目標**。

HTML 結構優化

jQuery 通用切換邏輯 (僅 6 行核心代碼)


$(function() {
  $('.helpBox-leftbox li[data-target]').on('click', function() {
    const target = $(this).data('target'); // 取得 data-target 值
    // 1. 隱藏所有擁有 data-panel 的面板
    $('.helpTutorials[data-panel]').hide();
    // 2. 顯示目標面板 (淡入動畫)
    $('.helpTutorials[data-panel="' + target + '"]').fadeIn();
  });
});

關鍵設計點解析

技巧	作用	優勢
`data-target` / `data-panel`	HTML5 data-* 屬性儲存對應關係	語意清晰、不污染 class/id、jQuery `.data()` 直接讀取
統一選擇器隱藏	`$('.helpTutorials[data-panel]').hide()`	無需迴圈、不依賴索引順序、新增面板自動生效
屬性選擇器精準顯示	`$('[data-panel="'+target+'"]')`	精確匹配、支援多組獨立切換互不干擾
事件委派 (可選)	`$(document).on('click', '.helpBox-leftbox li[data-target]', ...)`	動態新增 ` ` 也生效、減少綁定數量

原生 JavaScript 實現 (零依賴、現代瀏覽器)


document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.helpBox-leftbox li[data-target]').forEach(li => {
    li.addEventListener('click', () => {
      const target = li.dataset.target;
      // 隱藏所有
      document.querySelectorAll('.helpTutorials[data-panel]').forEach(p => p.hidden = true);
      // 顯示目標
      const panel = document.querySelector('.helpTutorials[data-panel="' + target + '"]');
      if (panel) panel.hidden = false; // 或 panel.style.display = 'block';
    });
  });
});

進階：多組獨立切換 (互不影響)

若每組 `

data-panel-group


 ... 
 ... 

...
...

// JS 邏輯
const group = li.closest('[data-panel-group]').dataset.panelGroup;
document.querySelectorAll('.helpTutorials[data-panel-group="' + group + '"]').forEach(p => p.hidden = true);
document.querySelector('.helpTutorials[data-panel="'+target+'"][data-panel-group="'+group+'"]').hidden = false;

常見錯誤避坑

❌ 用 `
` 索引 (`$(this).index()`) 對應面板 → 新增/刪除 `
` 即失效。**請用明確的 data-* 屬性綁定**。
❌ 面板用 `id="panel1"` 但選擇器寫成 `$('.panel1')` → class 與 id 混淆。**統一用 data-panel 屬性選擇器**。
❌ 未先隱藏所有面板 → 多個面板疊加顯示。**切換邏輯必須是「全隱 → 顯目標」**。

總結

多組 Tab/面板切換的最佳模式：**HTML `data-target`/`data-panel` 聲明對應關係 → JS 統一選擇器 `hide()` → 屬性選擇器 `show()`**。此模式擴充性極強：新增面板只需補 HTML 屬性，JS 完全不用改；支援多組獨立切換、動態新增、動畫效果自由切換。