在網頁開發中，選項卡是常見的元素之一。通過選項卡，用戶可以在不刷新頁面的情況下快速切換內容，提升了用戶體驗。而對于實現選項卡效果，jQuery提供了非常便捷的方法。

下面，我們來看一下jQuery實現選項卡效果的示例代碼：

// HTML 結構
<div class="tab">
<ul>
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">內容1</div>
<div class="tab-pane">內容2</div>
<div class="tab-pane">內容3</div>
</div>
</div>
// CSS 樣式
.tab ul {
list-style: none;
margin: 0;
padding: 0;
}
.tab ul li {
display: inline-block;
padding: 10px 20px;
border: 1px solid #999;
margin-right: -1px;
cursor: pointer;
}
.tab ul li.active {
background: #eee;
border-bottom: none;
}
.tab-content .tab-pane {
display: none;
padding: 10px;
border: 1px solid #999;
}
.tab-content .tab-pane.active {
display: block;
}
// JS 代碼
$(function() {
$('.tab ul li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
var index = $(this).index();
$('.tab-content .tab-pane').eq(index).addClass('active').siblings().removeClass('active');
});
});

這段代碼中，我們首先在HTML中定義了一個`.tab`容器，包含一個`.tab ul`標簽和一個`.tab-content`標簽。.`tab ul`用于存放選項卡按鈕，`.tab-content`用于存放選項卡內容。選項卡按鈕包括三個`li`標簽，其中默認選中的是`active`類。選項卡內容包括三個`tab-pane`標簽，其中默認顯示的是`active`類。在CSS中我們設置了選項卡的樣式，如邊框、背景色等。在JS中我們通過點擊事件監聽選項卡按鈕的點擊事件，點擊后將選中的按鈕添加`active`類，并將其他按鈕移除`active`類，同時將與按鈕對應的選項卡內容添加`active`類，將其他選項卡內容移除`active`類，以實現切換選項卡內容的效果。