選項卡切換是網頁上經常用到的一種功能，使用jquery能夠輕松實現，其中選項卡切換6是一種比較常見的樣式。

<div class="tab-container">
<ul class="nav-tabs">
<li class="active"><a href="#tab-1">選項卡1</a></li>
<li><a href="#tab-2">選項卡2</a></li>
<li><a href="#tab-3">選項卡3</a></li>
</ul>
<div class="tab-content">
<div id="tab-1" class="active">
<h3>這是選項卡1的內容</h3>
</div>
<div id="tab-2">
<h3>這是選項卡2的內容</h3>
</div>
<div id="tab-3">
<h3>這是選項卡3的內容</h3>
</div>
</div>
</div>

以上代碼中，通過給li標簽添加class為active，表示當前選中的選項卡，而tab-content中的內容則通過設置不同的id值和class為active來進行切換。接下來是通過jquery實現選項卡切換的代碼：

$(document).ready(function(){
$('.nav-tabs a').click(function(){
var tab_id = $(this).attr('href');
$('.nav-tabs li').removeClass('active');
$('.tab-content div').removeClass('active');
$(this).parent().addClass('active');
$(tab_id).addClass('active');
});
});

上述代碼中，首先通過click事件監聽選項卡的點擊事件，然后獲取到選項卡所對應的內容的id值，然后分別去掉ul和div中的active類，再分別為當前選中的選項卡添加active類，同時將對應的內容div的active類也加上，完成選項卡切換。