css 實作tab

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中文網其他相關文章！