DOM操作 – 小豬日常

使用 JavaScript 實作動態切換 Tab 面板的按鈕控制

小豬 — Wed, 10 Dec 2025 10:22:38 +0000

前言

在許多網頁應用中，常見的 UI 元件之一是 Tab 切換功能，讓使用者能在同一區塊內切換不同內容面板。這段程式碼示範如何用純 JavaScript 實作按鈕控制多個 Tab 面板的顯示與隱藏，適合有基礎 DOM 操作經驗，想了解如何手動管理元素狀態的前端工程師或自學者。

按鈕與面板元素的選取

首先，程式碼透過 document.querySelectorAll 分別取得所有具有 .action-btn 與 .tab-panel 類別的元素。這兩組元素分別代表切換按鈕與對應的內容面板。若任一組元素不存在，則直接結束執行，避免後續錯誤。

const buttons = document.querySelectorAll('.action-btn');
const panels  = document.querySelectorAll('.tab-panel');
if (!buttons.length || !panels.length) return;

activateButton 函式設計

activateButton 是核心函式，負責切換按鈕的「活躍」狀態與對應面板的顯示。它透過按鈕的 data-target 屬性取得目標面板的類別名稱，並依序執行：

移除所有按鈕的 is-active 樣式，確保只有一個按鈕處於活躍狀態。
為當前按鈕加上 is-active 樣式。
隱藏所有面板（移除 is-active 樣式）。
顯示對應目標面板（可支援多個面板同時顯示），加上 is-active 樣式。

這種設計讓按鈕與面板的關聯透過 CSS 類別靈活控制，方便樣式調整與擴充。

function activateButton(btn) {
  const target = btn.dataset.target;
  if (!target) return;

  buttons.forEach(b => b.classList.remove('is-active'));
  btn.classList.add('is-active');

  panels.forEach(p => p.classList.remove('is-active'));

  const targetPanels = document.querySelectorAll('.' + target);
  targetPanels.forEach(p => p.classList.add('is-active'));
}

綁定事件與初始化

接著，為每個按鈕綁定點擊事件，點擊時呼叫 activateButton，並阻止預設行為（例如連結跳轉）。

最後，為了讓頁面載入時即有預設顯示的面板，程式碼自動觸發第一個按鈕的點擊事件，確保初始化狀態與使用者互動完全一致，避免手動設定狀態可能導致的不同步問題。

buttons.forEach(btn => {
  btn.addEventListener('click', e => {
    e.preventDefault();
    activateButton(btn);
  });
});

buttons[0].click();

實務應用與延伸

這種純前端的 Tab 切換實作適合用於靜態頁面或不依賴框架的專案。若需要支援動態面板內容或更複雜的狀態管理，可考慮結合前端框架或狀態管理工具。

此外，為提升無障礙性，可在按鈕加入 ARIA 屬性，並確保鍵盤操作友好。

常見問題與注意事項

確保每個按鈕的 data-target 對應的面板類別名稱正確，否則無法正確顯示。
若有多個面板共用同一類別，會同時顯示，這是設計上的彈性，但需注意樣式與結構。
自動觸發點擊事件的做法雖方便，但若未考慮瀏覽器支援或其他腳本，可能會有兼容性問題。

完整程式碼

document.addEventListener('DOMContentLoaded', function () {
  const buttons = document.querySelectorAll('.action-btn');
  const panels  = document.querySelectorAll('.tab-panel');

  if (!buttons.length || !panels.length) return;

  function activateButton(btn) {
    const target = btn.dataset.target;
    if (!target) return;

    buttons.forEach(function (b) {
      b.classList.remove('is-active');
    });

    btn.classList.add('is-active');

    panels.forEach(function (p) {
      p.classList.remove('is-active');
    });

    const targetPanels = document.querySelectorAll('.' + target);
    targetPanels.forEach(function (p) {
      p.classList.add('is-active');
    });
  }

  buttons.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      activateButton(btn);
    });
  });

  buttons[0].click();
});

使用 JavaScript 控制表格列依年份篩選顯示

小豬 — Wed, 10 Dec 2025 10:22:08 +0000

前言

在許多資料表格中，我們常需要根據某個條件（例如年份）來篩選顯示特定的列。這段程式碼示範如何利用純 JavaScript 操作 DOM，根據下拉選單的選擇動態控制表格中帶有特定屬性（data-block）的列顯示與隱藏。適合需要簡潔且無依賴外部函式庫的前端工程師或自學者參考。

取得目標元素與資料列

首先，我們透過 document.getElementById 取得下拉選單元素，並使用 document.querySelectorAll 選取所有帶有 data-block 屬性的表格列（tr）。這些列代表不同年份的資料區塊。

const select = document.getElementById('select-download');
const blocks = Array.from(document.querySelectorAll('table tr[data-block]'));

儲存原始顯示狀態

為了避免直接覆寫 display 屬性導致無法還原，我們先讀取每個列的原始顯示狀態，並存入自訂的 data-orig-display 屬性中。這樣在切換篩選條件時，可以回復到原本的顯示方式。

blocks.forEach(el => {
  if (!el.dataset.origDisplay) {
    const d = window.getComputedStyle(el).display;
    el.dataset.origDisplay = (d && d !== 'none') ? d : 'block';
  }
});

篩選函式設計

applyFilter 函式會根據下拉選單的值，決定每個資料列是否顯示。若選擇 “all”，則全部顯示；否則只顯示 data-block 屬性值符合的列，其他則隱藏。

function applyFilter() {
  const val = select.value; // 例如 'all' 或 '2025'
  blocks.forEach(el => {
    const year = el.getAttribute('data-block');
    if (val === 'all' || year === val) {
      el.style.display = el.dataset.origDisplay;
    } else {
      el.style.display = 'none';
    }
  });
}

綁定事件與初始化

程式碼在 DOMContentLoaded 時執行，確保元素已存在。初次執行一次篩選，並監聽下拉選單的 change 事件，動態更新顯示狀態。

applyFilter();
select.addEventListener('change', applyFilter);

實務應用與延伸

這種用法適合靜態或小型資料表格的前端篩選，無需後端或複雜框架支援。若資料量大，可考慮分頁或虛擬滾動優化效能。未來也能擴充多條件篩選，或搭配 CSS 動畫增強使用者體驗。

常見問題與注意事項

確保 data-block 屬性值與下拉選單選項一致。
若原始顯示狀態非 block，此程式碼會自動保存並還原，避免顯示異常。
若表格結構改變，需確認選取器仍正確。

完整程式碼

document.addEventListener('DOMContentLoaded', function () {
  const select = document.getElementById('select-download');
  if (!select) return;

  // 只控制 Greenshift 的區塊，且有 data-block（年份）
  const blocks = Array.from(
    document.querySelectorAll('table tr[data-block]')
  );

  // 記住原本的 display（以防原本不是 block）
  blocks.forEach(el => {
    if (!el.dataset.origDisplay) {
      const d = window.getComputedStyle(el).display;
      el.dataset.origDisplay = (d && d !== 'none') ? d : 'block';
    }
  });

  function applyFilter() {
    const val = select.value; // 'all' 或 '2025'...
    blocks.forEach(el => {
      const year = el.getAttribute('data-block');
      if (val === 'all' || year === val) {
        el.style.display = el.dataset.origDisplay;
      } else {
        el.style.display = 'none';
      }
    });
  }

  // 初次執行一次（依目前選中的值）
  applyFilter();

  // 監聽選單變更
  select.addEventListener('change', applyFilter);
});

使用 JavaScript 自動隱藏無目錄的 toc-block 區塊

小豬 — Wed, 10 Dec 2025 10:21:42 +0000

前言

在網頁中，我們常會使用目錄區塊（toc-block）來幫助使用者快速瀏覽內容，但有時候目錄內容（gs-toc）可能因為資料不完整或條件不符而不存在，這時候空白的目錄區塊反而會影響頁面美觀與使用體驗。本文示範如何用簡單的 JavaScript 程式碼，在頁面載入完成後自動檢查並隱藏沒有目錄內容的 toc-block，適合前端工程師或自學者優化動態內容顯示。

為什麼要隱藏空的 toc-block

空的目錄區塊會佔據頁面空間，造成視覺上的空洞，甚至誤導使用者以為頁面資料不完整。透過程式自動判斷並隱藏，可以提升頁面整潔度與使用者體驗，尤其在內容經常變動或由後端動態產生時更為重要。

主要程式碼說明

以下是核心程式碼片段：

document.addEventListener("DOMContentLoaded", function() {
  const tocBlocks = document.querySelectorAll(".toc-block");

  tocBlocks.forEach(block => {
    const hasToc = block.querySelector(".gs-toc");
    if (!hasToc) {
      block.style.display = "none";
    }
  });
});

使用 DOMContentLoaded 事件確保 DOM 元素已經載入完畢，避免查詢不到元素。
利用 document.querySelectorAll 選取所有 .toc-block 元素，方便批次處理。
針對每個 toc-block，使用 querySelector 檢查是否含有 .gs-toc 子元素。
若找不到 .gs-toc，代表此目錄區塊沒有內容，將其 display 設為 none，達到隱藏效果。

實務應用與優化方向

此方法適用於靜態或動態產生的目錄區塊，確保頁面不會顯示空白區塊。
若目錄內容是透過 AJAX 載入，需將檢查邏輯放在資料載入完成後執行。
可搭配 CSS 動畫效果，讓隱藏過程更為平滑。
若頁面中 toc-block 數量龐大，考慮使用更有效率的 DOM 操作或節流機制。

常見問題與注意事項

確認 .gs-toc 是目錄內容的正確 class 名稱，避免誤判。
若頁面中有多層目錄結構，需調整選擇器以符合需求。
使用 display: none 會完全移除元素佔用空間，若想保留佔位可改用其他 CSS 屬性。

完整程式碼

document.addEventListener("DOMContentLoaded", function() {
  // 取得所有 toc-block
  const tocBlocks = document.querySelectorAll(".toc-block");

  tocBlocks.forEach(block => {
    // 檢查這個 toc-block 底下是否有 gs-toc
    const hasToc = block.querySelector(".gs-toc");

    // 如果沒有找到，則隱藏整個區塊
    if (!hasToc) {
      block.style.display = "none";
    }
  });
});

為 WordPress 分類清單實作手風琴展開收合功能

小豬 — Wed, 10 Dec 2025 10:21:20 +0000

前言

在 WordPress 網站中，分類清單常用於側邊欄或導覽列，當分類層級較多時，使用者體驗會因為清單過長而降低。這段程式碼的目標是為多層分類清單加入手風琴（Accordion）功能，使得使用者可以展開或收合子分類，提升導覽的清晰度與操作便利性。本文適合有基礎 JavaScript 與 DOM 操作經驗的前端工程師或自學者，想了解如何結合無障礙設計（ARIA）與動態 DOM 操作來優化分類清單。

目標與使用情境

這段程式碼主要解決以下問題：

多層分類清單展開收合控制
一次只允許展開一個分類（手風琴嚴格模式）
兼顧無障礙操作，使用 ARIA 屬性提示狀態
保持原有連結功能不受影響

適用於 WordPress 產生的分類清單（如 .wp-block-categories 或 .wp-block-categories-list），並且希望加強使用者操作體驗與無障礙支援。

主要流程解析

1. 選取目標清單容器

const roots = Array.from(document.querySelectorAll('.wp-block-categories, .wp-block-categories-list'));
if (!roots.length) return;

這裡先找出所有符合條件的分類清單容器，若無則直接結束，避免不必要的後續操作。

2. 設定手風琴模式

const singleOpen = true;

設定是否一次只允許展開一個分類項目，true 表示嚴格手風琴模式。

3. 標記並處理有子分類的項目

const parents = Array.from(root.querySelectorAll('li.cat-item > ul.children'))
  .map(ul => ul.parentElement)
  .filter(li => li && li.matches('.cat-item'));

找出所有有子清單的分類項目（li.cat-item 中包含 ul.children），這些項目需要被加上展開收合功能。

4. 加入切換按鈕與 ARIA 屬性

const toggleBtn = document.createElement('button');
toggleBtn.className = 'cat-toggle';
toggleBtn.type = 'button';
toggleBtn.setAttribute('aria-expanded', 'false');
toggleBtn.setAttribute('aria-controls', subId);
toggleBtn.setAttribute('title', '展開/收合');

為每個有子分類的 li 加入一個按鈕，用於切換展開狀態，同時透過 aria-expanded 與 aria-controls 屬性提升無障礙體驗。

5. 切換展開收合狀態的邏輯

function toggle(open) {
  const willOpen = (typeof open === 'boolean') ? open : !li.classList.contains('is-open');
  if (willOpen) {
    if (singleOpen) {
      const siblings = Array.from(li.parentElement.children)
        .filter(el => el !== li && el.classList && el.classList.contains('is-open'));
      siblings.forEach(sib => {
        sib.classList.remove('is-open');
        const btn = sib.querySelector(':scope > .cat-toggle');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      });
    }
    li.classList.add('is-open');
    toggleBtn.setAttribute('aria-expanded', 'true');
  } else {
    li.classList.remove('is-open');
    toggleBtn.setAttribute('aria-expanded', 'false');
  }
}

此函式負責切換展開狀態，若啟用嚴格手風琴模式，會同時關閉同層其他已展開的分類。狀態透過 is-open 類別與按鈕的 aria-expanded 屬性同步更新。

6. 綁定事件與點擊行為控制

按鈕點擊時切換展開狀態
點擊非連結與非按鈕的 li 項目空白處也能切換展開，避免影響原本連結導頁

toggleBtn.addEventListener('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  toggle();
});

li.addEventListener('click', function(e) {
  const isLink = e.target.closest('a');
  const isBtn  = e.target.closest('.cat-toggle');
  if (!isLink && !isBtn) {
    e.preventDefault();
    toggle();
  }
});

7. 預設展開目前分類項目

若分類項目本身或其子分類包含 current-cat 或 current-cat-parent 類別，則預設展開，方便使用者辨識目前所在分類。

if (li.classList.contains('current-cat') ||
    li.classList.contains('current-cat-parent') ||
    sub.querySelector('.current-cat, .current-cat-parent')) {
  toggle(true);
}

實務應用與優化方向

可依需求調整 singleOpen 為 false，允許多個分類同時展開
按鈕樣式與動畫可加入 CSS 過渡效果，提升使用者體驗
可擴充鍵盤操作支援，增強無障礙友善度
若分類清單動態更新，需額外處理事件重新綁定

常見問題與注意事項

插入按鈕位置需謹慎，避免破壞原本的連結結構
使用 aria-controls 需確保對應的子清單有唯一 ID
點擊事件阻止預設行為，避免影響連結跳轉，需確認邏輯正確

完整程式碼

document.addEventListener('DOMContentLoaded', function() {
  // 你貼的清單容器 class
  const roots = Array.from(document.querySelectorAll('.wp-block-categories, .wp-block-categories-list'));
  if (!roots.length) return;

  // 設定：是否一次只開一個（true = 手風琴嚴格模式）
  const singleOpen = true;

  roots.forEach(function(root) {
    // 標記啟用
    root.classList.add('cat-accordion');

    // 找到有 children 的 cat-item
    const parents = Array.from(root.querySelectorAll('li.cat-item > ul.children'))
      .map(ul => ul.parentElement)
      .filter(li => li && li.matches('.cat-item'));

    // 為每個需要的 li 補上 class 與切換按鈕/ARIA
    parents.forEach(function(li, idx) {
      li.classList.add('has-children');

      const sub = li.querySelector(':scope > ul.children');
      // 建唯一 id，便於 aria-controls 連結
      const subId = sub.id || ('cat-sub-' + Math.random().toString(36).slice(2));
      sub.id = subId;

      // 建立切換按鈕（放在 
 後面，不影響原有點擊導覽）
      const toggleBtn = document.createElement('button');
      toggleBtn.className = 'cat-toggle';
      toggleBtn.type = 'button';
      toggleBtn.setAttribute('aria-expanded', 'false');
      toggleBtn.setAttribute('aria-controls', subId);
      toggleBtn.setAttribute('title', '展開/收合');

      // 插到 a 後（若沒有 a，則插到 li 內最前）
      const anchor = li.querySelector(':scope > a');
      if (anchor && anchor.nextSibling) {
        anchor.parentNode.insertBefore(toggleBtn, anchor.nextSibling);
      } else if (anchor) {
        anchor.parentNode.appendChild(toggleBtn);
      } else {
        li.insertBefore(toggleBtn, li.firstChild);
      }

      // 切換邏輯
      function toggle(open) {
        const willOpen = (typeof open === 'boolean') ? open : !li.classList.contains('is-open');
        if (willOpen) {
          if (singleOpen) {
            // 關閉同層其他
            const siblings = Array.from(li.parentElement.children)
              .filter(el => el !== li && el.classList && el.classList.contains('is-open'));
            siblings.forEach(sib => {
              sib.classList.remove('is-open');
              const btn = sib.querySelector(':scope > .cat-toggle');
              if (btn) btn.setAttribute('aria-expanded', 'false');
            });
          }
          li.classList.add('is-open');
          toggleBtn.setAttribute('aria-expanded', 'true');
        } else {
          li.classList.remove('is-open');
          toggleBtn.setAttribute('aria-expanded', 'false');
        }
      }

      // 綁定按鈕點擊
      toggleBtn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        toggle();
      });

      // 如果想讓點 li 標題也能展開（但避免影響連結導頁）：
      // 只在點擊「li 空白處」才切換；點到 a 時仍正常導頁
      li.addEventListener('click', function(e) {
        const isLink = e.target.closest('a');
        const isBtn  = e.target.closest('.cat-toggle');
        if (!isLink && !isBtn) {
          e.preventDefault();
          toggle();
        }
      });

      // 進階：如果此項或其子層有 "current-cat" / "current-cat-parent" 類別，預設展開
      if (li.classList.contains('current-cat') ||
          li.classList.contains('current-cat-parent') ||
          sub.querySelector('.current-cat, .current-cat-parent')) {
        toggle(true);
      }
    });
  });
});

原生 JavaScript 實作 Tab 功能選單筆記

小豬 — Thu, 02 Nov 2017 17:06:42 +0000

前言

Tab 功能是前端常見的 UI 元件，許多框架都提供現成的實作，但若想深入理解其背後的運作原理，使用原生 JavaScript 自行實作是一個很好的練習。本文適合有基礎程式能力的工程師或自學者，透過範例拆解，了解如何控制元素顯示與切換樣式。

HTML 結構說明

Tab 功能主要由兩部分組成：控制按鈕與內容區塊。

按鈕部分使用標籤，href="javascript:void(0)" 用來阻止預設跳轉行為。

按鈕會帶有 tablink 及特定的 testbtn class，方便 JavaScript 操作。

onclick 事件會呼叫 openClass(event, 'classX')，帶入事件物件與對應內容區塊的 id。

內容區塊以 id 和 class="class" 標示，對應按鈕的參數，方便顯示與隱藏。


  

選單
    教學1
    教學2
    教學3
    教學4
  



  教學1內容


  教學2內容


  教學3內容


  教學4內容

JavaScript 功能解析

openClass 函式負責切換 Tab 的顯示狀態與按鈕樣式：

使用 document.getElementsByClassName("class") 取得所有內容區塊，並將它們隱藏（display = "none"）。
取得所有按鈕元素 tablinks，並移除所有按鈕的 red 樣式，確保只有一個按鈕被標示為選中。
根據傳入的 className 參數，將對應內容區塊顯示（display = "block"）。
對當前點擊的按鈕元素新增 red class，標示為選中狀態。

function openClass(evt, className) {
  var i, x, tablinks;
  x = document.getElementsByClassName("class");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("red");
  }
  document.getElementById(className).style.display = "block";
  evt.currentTarget.classList.add("red");
}

// 頁面載入後自動觸發第一個帶有 testbtn 的按鈕點擊
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();

實際應用與延伸

可依需求調整 red class 的 CSS 樣式，達到不同的選中效果。
若 Tab 數量動態產生，需確保事件綁定正確。
可改用事件代理方式優化效能。
進階可結合動畫效果，提升使用者體驗。

常見坑點

忘記阻止的預設行為會導致頁面跳轉。

未正確移除其他按鈕的選中樣式，導致多個 Tab 同時被標示。

忘記預設觸發第一個 Tab，頁面初始狀態會空白。

完整程式碼





原生 JavaScript Tab 功能





  

選單
    教學1
    教學2
    教學3
    教學4
  



  教學1內容


  教學2內容


  教學3內容


  教學4內容