在web開發中，選項卡是一個非常常見的功能，可以通過CSS來實現選項卡的顯隱效果。

HTML結構如下:
<div class="tabs">
<ul class="tabs-nav">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tabs-content">
<div class="tab-pane active">選項卡1內容</div>
<div class="tab-pane">選項卡2內容</div>
<div class="tab-pane">選項卡3內容</div>
</div>
</div>
CSS樣式如下:
.tabs .tabs-nav li.active {
border-bottom: 2px solid #333;
color: #333;
}
.tabs .tabs-nav li:hover {
color: #333;
}
.tabs .tabs-content .tab-pane {
display: none;
}
.tabs .tabs-content .tab-pane.active {
display: block;
}
JavaScript代碼如下:
var tabs = document.querySelectorAll('.tabs .tabs-nav li');
var tabPanes = document.querySelectorAll('.tabs .tabs-content .tab-pane');
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = function() {
var currentTab = this;
var currentTabPanes = document.querySelectorAll(currentTab.dataset.target);
if (!currentTab.classList.contains('active')) {
for (var j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active');
}
for (var j = 0; j < tabPanes.length; j++) {
tabPanes[j].classList.remove('active');
}
currentTab.classList.add('active');
for (var j = 0; j < currentTabPanes.length; j++) {
currentTabPanes[j].classList.add('active');
}
}
}
}

以上代碼實現了一個簡單的CSS選項卡，通過點擊不同的選項卡可以切換到對應的內容。其中，通過給選項卡添加類名'active'來實現選項卡的高亮，通過給內容區域添加類名'active'來實現對應內容的顯隱。

同時，需要注意，在JavaScript代碼中，定義了一個data-target屬性來表示對應的內容區域。利用這個屬性可以簡化代碼，并且支持多個選項卡切換（例如相同的多個選項卡對應不同的內容）。