CSS 實作Tab 樣式
Tab 樣式是web 開發中非常常見的互動設計，它以標籤頁的形式展示多個內容區域，使用者透過點擊選項卡來切換顯示區域，大大提高了網頁的易用性。在本文中，我們將介紹如何使用 CSS 來實作簡單的 Tab 樣式。
首先，我們需要先定義HTML 結構，具體的結構如下：
<div class="tab">
<div class="tab-header">
<button class="tab-button active">Tab 1</button>
<button class="tab-button">Tab 2</button>
<button class="tab-button">Tab 3</button>
</div>
<div class="tab-content active">
<p>这里是 Tab 1 的内容</p>
</div>
<div class="tab-content">
<p>这里是 Tab 2 的内容</p>
</div>
<div class="tab-content">
<p>这里是 Tab 3 的内容</p>
</div>
</div>在上述結構中，我們使用div 元素作為容器，包含了兩個子元素，分別是選項卡頭和選項卡內容。選項卡頭使用 button 元素表示每個選項卡，而選項卡內容使用 div 元素包裹。其中，每個選項卡和選項卡內容都相關聯的一個 active 類別名，用於表示目前選擇的選項卡。
接下來，我們開始使用 CSS 來定義樣式。首先，我們需要去掉 button 元素的預設樣式：
button {
background: transparent;
border: none;
outline: none;
padding: 0.5rem 1rem;
cursor: pointer;
}在上述樣式中，我們去掉了 button 元素的背景、邊框、輪廓和填充，讓它看起來像一個純文字連結。並且設定了滑鼠指標的樣式為手型，讓它看起來更像一個可點擊的按鈕。
下一步，我們設定.tab-header 的樣式，來實現選項卡的背景色和啟動狀態：
.tab-header {
display: flex;
}
.tab-button {
background-color: #f4f4f4;
}
.tab-button:hover {
background-color: #ddd;
}
.tab-button.active {
background-color: #ddd;
}在上述樣式中，我們使用了Flexbox 佈局來使得選項卡水平排列。然後，我們定義了 .tab-button 的背景色和懸停狀態的背景色。最後，我們使用類別名稱 .active 來表示目前啟動的選項卡，我們將它的背景色設定為和懸停狀態相同，以便在頁面載入時直接顯示出選項卡的啟動狀態。
現在，我們只需要為每個選項卡定義一個類別名，並將啟動狀態的類別名稱新增到第一個選項卡中。例如：
<button class="tab-button active tab-1">Tab 1</button> <button class="tab-button tab-2">Tab 2</button> <button class="tab-button tab-3">Tab 3</button>
在上述結構中，我們為每個選項卡分別新增了一個類別名稱tab-1、tab-2、tab -3。這些類別名稱將用於為各自的選項卡定義 CSS 樣式。
下一步，我們設定.tab-content 的樣式，來實作選項卡內容的顯示與隱藏：
.tab-content:not(.active) {
display: none;
}在上述樣式中，我們使用了:not(.active) 選擇器來符合除了啟動狀態之外的選項卡內容。我們設定它們的 display 屬性為 none，以便讓它們隱藏在頁面上。
最後，我們使用JavaScript 綁定事件，來實現點擊選項卡切換內容的功能：
const tabs = document.querySelectorAll('.tab-button')
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 隐藏所有选项卡内容
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active')
})
// 显示当前选项卡内容
const activeTab = tab.classList[1]
document.querySelector(`.${activeTab}`).classList.add('active')
// 切换选项卡的激活状态
tabs.forEach(tab => {
tab.classList.remove('active')
})
tab.classList.add('active')
})
})在上述程式碼中，我們使用了querySelectorAll() 方法選擇所有選項卡內容元素，並在點擊選項卡時循環遍歷它們，將它們的active 類別名稱全部移除。然後，我們使用 classList 屬性來取得目前標籤對應的內容元素，並新增 active 類別名，以便顯示該選項卡內容。最後，我們將所有選項卡的啟動狀態移除，並為目前選項卡新增 active 類別名，使其呈現啟動狀態。這樣，我們就成功實現了一個簡單的 Tab 樣式。
總結：
在這篇文章中，我們使用了 CSS 和 JavaScript 來實作了一個簡單的 Tab 樣式。我們首先定義了 HTML 結構，然後使用 CSS 定義了標籤的背景色、懸停狀態和啟動狀態。最後，我們使用 JavaScript 來實現了點擊選項卡切換內容的功能。這種樣式的實作方法簡單、易於理解和修改，適用於大部分 web 開發專案。
以上是css 實作tab的詳細內容。更多資訊請關注PHP中文網其他相關文章！
