JavaScript 實現導航選單與內容區塊切換（Tab 切換）完整教學

需求分析

• 多層級導航選單（主選單 + 子選單）
• 點擊主選單/子選單項目 → 顯示對應內容區塊，隱藏其他
• 程式碼需淺顯易懂、可維護

HTML 結構（語意化）

<nav id="menu">
  <ul class="menu-bar">
    <li><a href="#tab-home" data-tab="tab-home">返回題庫</a></li>
    <li><a href="#tab-new" data-tab="tab-new">新建題庫</a></li>
    <li class="has-sub">
      <a href="#">新增試題</a>
      <ul class="sub-menu">
        <li><a href="#tab-single" data-tab="tab-single">單選題</a></li>
        <li><a href="#tab-multi" data-tab="tab-multi">多選題</a></li>
      </ul>
    </li>
  </ul>
</nav>

<section class="tab-panel" id="tab-home">...</section>
<section class="tab-panel" id="tab-new">...</section>
<section class="tab-panel" id="tab-single">...</section>
<section class="tab-panel" id="tab-multi">...</section>

CSS 基礎樣式

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.has-sub > .sub-menu { display: none; }
.has-sub:hover > .sub-menu { display: block; }

JavaScript 核心邏輯（原生 ES6，無依賴）

document.addEventListener('DOMContentLoaded', () => {
  const tabs = document.querySelectorAll('.tab-panel');
  const triggers = document.querySelectorAll('[data-tab]');

  // 1. 統一切換函式
  function showTab(tabId) {
    tabs.forEach(t => t.classList.toggle('active', t.id === tabId));
  }

  // 2. 綁定所有觸發點
  triggers.forEach(a => {
    a.addEventListener('click', e => {
      e.preventDefault();
      const tabId = a.dataset.tab;
      if (tabId) showTab(tabId);
    });
  });

  // 3. 預設顯示第一個
  if (tabs[0]) tabs[0].classList.add('active');
});

進階：支援巢狀選單狀態同步

// 若點擊子選單，同時高亮父選單
const parentLi = a.closest('.has-sub');
if (parentLi) parentLi.classList.add('active-parent');

無障礙（a11y）加分項

• 使用 role="tablist"、role="tab"、role="tabpanel"
• 鍵盤操作：ArrowLeft/Right 切換、Enter/Space 啟用
• ARIA 屬性：aria-selected、aria-controls

完整可執行範例

可直接複製至 .html 檔案雙擊執行，無需伺服器。