CSS怎么做Tab？

Tab是常見的界面元素之一，常用于展示不同的內容或分類信息。本文將介紹如何使用CSS實現Tab。

首先，我們需要HTML骨架，如下所示：

<div class="tab-container">
<div class="tab">選項1</div>
<div class="tab">選項2</div>
<div class="tab">選項3</div>
<div class="content">內容1</div>
<div class="content">內容2</div>
<div class="content">內容3</div>
</div>

然后，我們使用CSS樣式來隱藏所有內容元素，只顯示第一個內容元素：

.content {
display: none;
}
.content:first-child {
display: block;
}

接下來，我們用CSS來綁定選項卡，使其在點擊時顯示對應的內容：

.tab.active {
background-color: #ddd;
}
.content.active {
display: block;
}
.tab:hover {
cursor: pointer;
}

最后，我們使用jQuery來處理選項卡的點擊事件，并在觸發時添加和移除.active類：

$('.tab').click(function() {
$('.tab.active').removeClass('active');
$(this).addClass('active');
$('.content.active').removeClass('active');
$('.content').eq($(this).index()).addClass('active');
})

至此，我們就成功地實現了CSS Tab。通過CSS和jQuery的組合使用，我們可以輕松實現各種精美的Tab樣式。