選項卡是網頁開發中很常用的一種交互效果。使用jquery可以很方便地實現選項卡效果。下面是一個簡單的jquery選項卡代碼示例。

//html代碼：
<ul id="tabHeader">
<li>選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div id="tabContent">
<div>選項卡1的內容</div>
<div>選項卡2的內容</div>
<div>選項卡3的內容</div>
</div>
//jquery代碼：
$('#tabHeader li').click(function () {
//重置選項卡樣式
$('#tabHeader li').removeClass('active');
$(this).addClass('active');
//顯示對應的內容
var index = $(this).index();
$('#tabContent div').hide().eq(index).show();
});
//CSS代碼
#tabHeader li {
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
#tabHeader li.active {
background-color: #ccc;
}
#tabContent div {
display: none;
padding: 20px;
border: 1px solid #ccc;
}

代碼中首先是HTML部分，包含一個ul列表和一個div容器，用于存放選項卡和其對應的內容。接下來是jquery代碼，使用click事件和index()方法實現選項卡的切換功能。同時使用addClass()和removeClass()方法來切換選項卡的樣式。最后是CSS樣式，用于美化選項卡和其對應的內容。