Tab切換功能在網站開發中十分常見，對用戶的交互體驗提升有很大幫助。而實現Tab切換的方法也有很多種，其中最常用的方式是使用CSS來進行樣式控制。

/* HTML結構 */
<div class="tab">
<ul class="tab-nav">
<li class="active">選項一</li>
<li>選項二</li>
<li>選項三</li>
</ul>
<div class="tab-content">
<div class="active">選項一的內容</div>
<div>選項二的內容</div>
<div>選項三的內容</div>
</div>
</div>
/* CSS樣式 */
.tab-nav {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding: 0;
}
.tab-nav li {
padding: 10px;
cursor: pointer;
font-size: 16px;
color: #666;
}
.tab-nav li.active {
color: #333;
background-color: #fff;
border-bottom: 2px solid #333;
}
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}

以上是一個簡單的Tab切換的HTML和CSS樣式代碼。其中，tab-nav是選項卡的導航欄，通過display:flex;和justify-content:space-between;將選項卡水平排列，并添加list-style:none;和padding:0;去除默認的ul的樣式。每個選項卡使用li標簽表示。

選項卡的內容使用.tab-content包裹，其中每個選項卡的內容使用div標簽表示，設置display:none;讓選項卡的內容默認不顯示。通過.tab-nav li.active和.tab-content div.active來實現選項卡的切換效果。當選項卡的li標簽被點擊時，添加.active class，調整樣式實現選項卡的切換。