選項卡是網頁中常見的一種交互式組件，jquery是一種JavaScript庫，它可以輕松地處理網頁元素和事件。結合jquery的選項卡可以實現選中狀態的效果。

HTML結構如下：
<div class="tabs">
<ul class="tab-nav">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content">
<div id="tab1">Lorem ipsum dolor sit amet.</div>
<div id="tab2">Consectetur adipisicing elit.</div>
<div id="tab3">Ut enim ad minim veniam.</div>
</div>
</div>

css樣式如下：

.tabs {
border: 1px solid #ccc;
padding: 10px;
}
.tab-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tab-nav li {
display: inline-block;
margin-right: 10px;
}
.tab-nav li a {
background: #eee;
color: #333;
display: block;
padding: 5px 10px;
text-decoration: none;
}
.tab-nav li.active a {
background: #333;
color: #fff;
}
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}

通過jquery代碼實現選項卡選中狀態，如下：

$(document).ready(function() {
// 默認第一個選項卡為選中狀態，顯示對應的內容
$("#tab1").addClass("active");
$(".tab-nav li:first-child").addClass("active");
$(".tab-content div:first-child").addClass("active");
// 點擊選項卡切換內容
$(".tab-nav li").click(function() {
var tabId = $(this).find("a").attr("href");
$(".tab-nav li").removeClass("active");
$(".tab-content div").removeClass("active");
$(this).addClass("active");
$(tabId).addClass("active");
});
});

以上代碼通過給第一個選項卡和對應的內容添加active類來實現默認選中狀態，通過點擊選項卡刪除其他選項卡的active類，并給當前選項卡和對應內容添加active類來實現選中狀態的效果。