昨天完成了基本的網頁版型，今天要來做一個小小的互動：按鈕切換頁面內容。這個功能常見於網頁中，例如：商品頁面切換「介紹 / 評價」、音樂網站切換「歌手 / 專輯」。

HTML

在 body 裡面加了切換按鈕區塊和兩個內容區域：


這裡有兩個重點：

• class="active" 代表目前顯示的內容或被選中的按鈕。
• id (aboutBtn, musicBtn) 會給 JavaScript 使用。

CSS

把按鈕做成一個切換區塊，效果像「標籤切換」：


這樣就能確保只有一個內容區塊會顯示。

JavaScript

接著讓兩個按鈕「控制」內容顯示：

這段程式碼的邏輯：

• 點擊按鈕 → 加上 .active 樣式 → 顯示對應內容 → 隱藏另一個。
• 用 classList.add/remove 來切換狀態。

前四行:取得按鈕內容
功能:
透過 document.getElementById() 從 HTML 文件中獲取四個元素，根據它們的 id 屬性：

• aboutBtn: 「About Keshi」按鈕。
• musicBtn: 「Music」按鈕。
• aboutContent: 「About Keshi」內容區塊。
• musicContent: 「Music」內容區塊。

解釋:

• document.getElementById() 是 JavaScript 的 DOM API，用來查找具有指定 id 的 HTML 元素。
• 使用 const 聲明變數，表示這些變數不會被重新賦值。

中間部分:切換至About Keshi
功能:
為 aboutBtn（About Keshi 按鈕）添加一個點擊事件監聽器，當按鈕被點擊時執行指定的回調函數。

解釋:

• aboutBtn.addEventListener("click", () => { ... }):
  • addEventListener 是 DOM 元素的方法，用於監聽特定事件（這裡是 "click"）。
  • 當用戶點擊 aboutBtn 時，執行箭頭函數（=>）中的程式碼。
• aboutBtn.classList.add("active"):
  • 為 aboutBtn 元素添加 CSS 類別 active，通常用來改變按鈕的樣式（例如高亮顯示，表明它是被選中的標籤）。
• musicBtn.classList.remove("active"):
  • 移除 musicBtn 的 active 類別，確保只有一個按鈕處於活躍狀態。
• aboutContent.classList.add("active"):
  • 為 aboutContent 區塊添加 active 類別，使其顯示（通常透過 CSS 控制顯示/隱藏）。
• musicContent.classList.remove("active"):
  • 移除 musicContent 的 active 類別，使其隱藏。

後半部分:切換至Music
功能:
與上面的程式碼類似，這段為 musicBtn（Music 按鈕）添加點擊事件監聽器，當點擊時切換到「Music」內容。

解釋:

• 邏輯與 aboutBtn 的處理相反：
  • 為 musicBtn 添加 active 類別（高亮 Music 按鈕）。
  • 移除 aboutBtn 的 active 類別（取消 About Keshi 按鈕的高亮）。
  • 為 musicContent 添加 active 類別（顯示 Music 內容）。
  • 移除 aboutContent 的 active 類別（隱藏 About Keshi 內容）。

效果:
點擊「Music」按鈕時，網站顯示 Keshi 的音樂相關內容，同時隱藏「About Keshi」內容。

成果展示

• 預設顯示 About Keshi。
• 點擊 Music → 下方換成專輯清單。
• 點擊 About Keshi → 回到介紹內容。