jQuery選項(xiàng)卡是網(wǎng)站開發(fā)中常用的功能之一，它可以方便地組織頁面信息以及提升用戶體驗(yàn)。而給選項(xiàng)卡添加圖標(biāo)，則可以更直觀地表現(xiàn)每個(gè)選項(xiàng)卡的內(nèi)容，增強(qiáng)整體效果。

下面是一個(gè)簡單的示例，展示如何使用jQuery選項(xiàng)卡切換圖標(biāo)：

<!-- HTML代碼 -->
<div class="tab-box">
<ul class="tab-menu">
<li class="active"><i class="fas fa-home"></i>首頁</li>
<li><i class="fas fa-user"></i>個(gè)人中心</li>
<li><i class="fas fa-cog"></i>設(shè)置</li>
</ul>
<div class="tab-content">
<div class="active"><p>這是首頁內(nèi)容</p></div>
<div><p>這是個(gè)人中心內(nèi)容</p></div>
<div><p>這是設(shè)置內(nèi)容</p></div>
</div>
</div>
<!-- CSS代碼 -->
.tab-box {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.tab-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.tab-menu li {
padding: 10px;
cursor: pointer;
}
.tab-menu li i {
margin-right: 5px;
}
.tab-menu li.active {
background-color: #eee;
}
.tab-content {
margin-top: 10px;
}
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}
<!-- JS代碼 -->
$('.tab-menu li').click(function() {
// 切換選項(xiàng)卡樣式
$('.tab-menu li').removeClass('active');
$(this).addClass('active');
// 切換選項(xiàng)卡內(nèi)容
var index = $(this).index();
$('.tab-content div').removeClass('active');
$('.tab-content div').eq(index).addClass('active');
});

以上代碼中，我們使用了Font Awesome提供的圖標(biāo)，需要在HTML文件中引入Font Awesome的CSS：

<link  rel="stylesheet">

在CSS中，我們?yōu)檫x項(xiàng)卡添加了一個(gè).active類，切換選項(xiàng)卡樣式時(shí)，只需將.active類從當(dāng)前選項(xiàng)卡移除并添加到被點(diǎn)擊的選項(xiàng)卡即可。在JS中，我們使用了jQuery的.index()方法來獲取被點(diǎn)擊的選項(xiàng)卡在.tab-menu中的位置，然后將.active類從當(dāng)前選項(xiàng)卡內(nèi)容移除并添加到對應(yīng)的選項(xiàng)卡內(nèi)容。

對于其他類型的圖標(biāo)，可以使用相應(yīng)的CSS類名或SVG代碼來實(shí)現(xiàn)。