在網頁開發中，選項卡是一個常見的組件，它可以切換不同的內容展示，為用戶提供更好的交互體驗。jQuery作為一款強大的JavaScript庫，提供了多種簡單易用的選項卡插件。

下面以一個簡單的選項卡為例，介紹jQuery選項卡的寫法。

<code><div class="tab">
<ul class="tab-nav">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<div class="tab-item active">內容1</div>
<div class="tab-item">內容2</div>
<div class="tab-item">內容3</div>
</div>
</div>
<script>
$(function() {
$('.tab-nav li').click(function() {
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.tab-content .tab-item').eq(index).addClass('active').siblings().removeClass('active');
});
});
</script></code>

以上代碼中，我們使用了一個div包裹起來的選項卡組件，包含了一個ul列表作為標簽頁的導航欄，和一個div作為標簽頁內容的容器。在JavaScript部分，我們給每個標簽頁加上了click事件，獲取點擊的標簽頁的索引值，使用jQuery方法找到相應內容的div，展示出對應的標簽頁內容。

使用jQuery編寫選項卡組件，可以大大減少代碼編寫量，提高效率和開發體驗。不僅如此，jQuery還提供了更多強大的選項卡插件，例如可以實現滑動切換、淡入淡出等特效的選項卡。