做標簽頁的關鍵在于結構清晰與邏輯簡單。首先，html部分通過按鈕和內容區域構建基本結構，每個按鈕綁定函數opentab并傳入對應標簽id。其次，css控制顯示，用.active類切換內容展示，默認隱藏非激活區域。接著，JavaScript處理切換邏輯，包括清除原有狀態并為當前按鈕和內容添加激活樣式。最后，可通過dom加載事件默認顯示第一個標簽。
做標簽頁其實不難，關鍵在于結構清晰、邏輯簡單。HTML本身沒有專門的“標簽頁”元素，但用幾個基礎標簽和一點css就能搞定。核心思路是：用按鈕控制不同內容塊的顯示與隱藏。
1. 基本結構：HTML部分
實現一個簡單的標簽頁，首先需要幾個按鈕作為標簽頭，再配合幾個內容區域。結構大致如下：
<div class="tab"> <button class="tablinks" onclick="openTab(event, 'Tab1')">標簽一</button> <button class="tablinks" onclick="openTab(event, 'Tab2')">標簽二</button> </div> <div id="Tab1" class="tabcontent"> <p>這是第一個標簽的內容。</p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p> </div> <div id="Tab2" class="tabcontent"> <p>這是第二個標簽的內容。</p> </div>
每個按鈕綁定一個函數（比如 openTab），點擊時傳入當前要打開的標簽ID。內容區則通過 id 來對應。
2. 控制顯示：CSS樣式
為了讓切換更直觀，我們需要CSS來隱藏非激活狀態的內容區域：
.tabcontent { display: none; } .tabcontent.active { display: block; }
這樣默認所有內容都是隱藏的，只有加上 active 類的時候才會顯示出來。
3. 切換邏輯：JavaScript控制
接下來寫個簡單的JS函數來處理切換邏輯：
function openTab(evt, tabName) { var i, tabcontent, tablinks; // 隱藏所有內容區 tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].classList.remove("active"); } // 移除所有按鈕的激活狀態 tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); } // 顯示當前選中的內容，并添加激活樣式 document.getElementById(tabName).classList.add("active"); evt.currentTarget.classList.add("active"); }
這段代碼做了三件事：
- 清除所有內容的顯示狀態；
- 清除所有按鈕的高亮；
- 給當前點擊的按鈕和對應的內容加上激活類。
你可以再加上一些過渡動畫或顏色變化來提升體驗。
4. 進階小技巧：默認展示第一個標簽
剛打開頁面時，最好能默認顯示一個內容區。可以在頁面加載完成后自動調用一次函數：
<script> // 頁面加載時自動打開第一個標簽 document.addEventListener("DOMContentLoaded", function () { document.getElementsByClassName("tablinks")[0].click(); }); </script>
這樣用戶一進來就看到內容，不會是一片空白。
基本上就這些了。整個實現過程不復雜，但細節上要注意類名一致、事件綁定正確。如果你只是做個靜態頁面或者小型項目，這種做法完全夠用。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
