CSS 選卡項是網頁設計中一個重要的元素，它可以讓用戶方便地瀏覽網站中的多個頁面。在本文中，我們將學習如何使用 CSS 創建選卡項。 首先，我們需要定義一個 HTML 結構，它由一個選項卡容器和多個選項卡組成。下面是一個簡單的示例：

<div class="tab-container">
<div class="tab">選項卡1</div>
<div class="tab">選項卡2</div>
<div class="tab">選項卡3</div>
</div>

然后，我們可以使用 CSS 為選項卡容器和選項卡添加樣式。下面是一個基本的 CSS 示例：

.tab-container {
display: flex;
justify-content: space-evenly;
}
.tab {
padding: 10px;
border: 1px solid black;
border-radius: 5px;
cursor: pointer;
background-color: lightgray;
transition: background-color 0.2s ease;
}
.tab:hover {
background-color: gray;
color: white;
}

在上面的 CSS 示例中，我們使用了 Flexbox 來水平排列選項卡，并為選項卡添加了一些基本的樣式，例如 padding, border 和 border-radius。我們還使用了指針樣式，讓選項卡在鼠標懸停時顯示為指針。最后，我們使用 transition 屬性來添加顏色漸變效果。 現在，我們需要添加一些 JavaScript 來為選項卡添加交互功能。我們可以使用以下示例代碼：

const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab =>{
tab.addEventListener('click', () =>{
tabs.forEach(tab =>tab.classList.remove('active'));
tab.classList.add('active');
});
});

在上面的代碼中，我們首先選擇所有的選項卡，并為每個選項卡添加一個單擊事件偵聽器。當用戶單擊一個選項卡時，我們首先刪除所有選項卡的活動類，然后將當前選項卡的活動類添加到選項卡上。 最后，我們可以添加一些 CSS 樣式，以便突出顯示當前活動選項卡。以下是一個示例：

.tab.active {
background-color: white;
color: black;
border-bottom-color: white;
}

在上述 CSS 代碼中，我們使用了 .tab.active 選擇器來選擇當前活動的選項卡，并為其添加了一個不同的背景顏色、文本顏色和底部邊框顏色。 通過這些方法，我們可以輕松創建一個漂亮的選項卡，使用戶可以快速瀏覽網站上的不同頁面。