選項卡是網頁設計中比較常見的功能，可以用來實現信息的分類展示。利用CSS我們可以很簡單地實現一組單擊選項卡，以下是一個純CSS實現的示例。

HTML代碼：

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

CSS代碼：

/* 隱藏所有選項卡的內容 */
.tab-content {
display: none;
}
/* 顯示當前選項卡的內容 */
.tab-content.active {
display: block;
}
/* 給選項卡添加鏈接樣式 */
.tab-links li {
display: inline-block;
margin-right: 10px;
padding: 5px;
background-color: #eee;
cursor: pointer;
}
.tab-links li:hover {
background-color: #ddd;
}
/* 激活的選項卡和鏈接樣式 */
.tab-links .active {
background-color: #fff;
font-weight: bold;
}
.tab-content.active ~ .tab-links .active {
background-color: #fff;
font-weight: bold;
}

如上代碼，實現了一個基礎的選項卡功能。點擊不同的選項卡，會切換到對應的內容。這是一個相當靈活的實現方法，因為你可以使用任何數量的選項卡和任何類型的內容。你可以很容易地為選項卡添加更多樣式以使其更加美觀。