CSS選項卡標簽可以為網頁增加交互性及可讀性，使得網頁更加美觀。本文將介紹用CSS實現選項卡的方法，并提供代碼實現。

首先，我們需要一個HTML結構，包括一個ul列表和一組對應的div容器。每個li作為一個選項卡，每個div容器包含與選項卡相對應的內容。代碼如下：

<ul class="tabs">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<div class="active">內容1</div>
<div>內容2</div>
<div>內容3</div>
</div>

接下來，我們需要設置一些基本的CSS樣式和屬性，使得標簽能夠正常顯示。例如，我們可以設置選項卡和內容容器的樣式，將選項卡與內容容器配對，以及設置選項卡的默認選擇狀態。代碼如下：

.tabs {
margin: 0;
padding: 0;
list-style-type: none;
}
.tabs li {
float: left;
margin-right: 10px;
padding: 6px 12px;
background-color: #eee;
cursor: pointer;
}
.tabs li.active {
background-color: #fff;
border: 1px solid #ccc;
}
.tab-content {
clear: both;
padding: 15px;
border: 1px solid #ccc;
}
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}

最后，我們需要一些JavaScript代碼，使得選項卡具有切換功能。在這個例子中，我們使用jQuery庫實現交互功能：

$('ul.tabs').on('click', 'li', function() {
// 激活當前標簽
$(this).addClass('active').siblings().removeClass('active');
// 顯示相應的內容
var index = $(this).index();
$('div.tab-content').children().eq(index).addClass('active').siblings().removeClass('active');
});

現在，我們已經完成了選項卡的制作，并通過CSS和JavaScript代碼實現了相應的功能。網頁的交互性和可讀性得到了很大的提升。