jQuery選項(xiàng)卡帶箭頭滑動(dòng)效果是網(wǎng)頁制作中常用的一種效果，它可以給網(wǎng)頁增加一定的交互性和美觀性。下面介紹如何使用jQuery實(shí)現(xiàn)這種效果。

//HTML結(jié)構(gòu)
<div class="tab">
<ul class="tab-nav">
<li>選項(xiàng)卡1</li>
<li>選項(xiàng)卡2</li>
<li>選項(xiàng)卡3</li>
</ul>
<div class="tab-content">
<div>選項(xiàng)卡1內(nèi)容</div>
<div>選項(xiàng)卡2內(nèi)容</div>
<div>選項(xiàng)卡3內(nèi)容</div>
</div>
<div class="arrow"></div>
</div>
//CSS樣式
.tab {
position: relative;
}
.tab-nav {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
}
.tab-nav li {
position: relative;
list-style: none;
cursor: pointer;
margin-right: 30px;
}
.tab-nav li.active {
color: #f00;
}
.tab-content {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: auto;
}
.tab-content >div {
display: none;
}
.tab-content >div.active {
display: block;
}
.arrow {
position: absolute;
top: 38px;
z-index: 1;
width: 10px;
height: 10px;
background: #000;
transform: rotate(45deg);
cursor: pointer;
}
//JS代碼
$(function() {
//初始化第一個(gè)選項(xiàng)卡的樣式
$('.tab-nav li:first').addClass('active');
$('.tab-content div:first').addClass('active').css('display', 'block');
//獲取選項(xiàng)卡導(dǎo)航和每個(gè)選項(xiàng)卡的寬度
var tabNav = $('.tab-nav');
var tabNavLi = $('.tab-nav li');
var tabNavW = tabNav.width();
var tabNavLiW = tabNavLi.width();
//根據(jù)選項(xiàng)卡導(dǎo)航數(shù)量設(shè)置選項(xiàng)卡容器寬度
var tabContentW = 100 * tabNavLi.length + '%';
$('.tab-content').css('width', tabContentW);
$('.tab-content >div').css('width', 100 / tabNavLi.length + '%');
//初始化箭頭位置
$('.arrow').css('left', tabNavLiW / 2 - 5);
//選項(xiàng)卡導(dǎo)航點(diǎn)擊事件
$('.tab-nav li').click(function() {
var index = $(this).index();
//設(shè)置選項(xiàng)卡樣式
$(this).addClass('active').siblings().removeClass('active');
//設(shè)置選項(xiàng)卡內(nèi)容樣式
$('.tab-content >div').eq(index).addClass('active').siblings().removeClass('active');
//移動(dòng)箭頭
var arrowPos = tabNavLiW * index + tabNavLiW / 2 - 5;
$('.arrow').animate({
left: arrowPos
}, 300);
});
});

通過上述代碼，我們可以實(shí)現(xiàn)一個(gè)簡單的jQuery選項(xiàng)卡帶箭頭滑動(dòng)效果，讓網(wǎng)頁更加美觀和互動(dòng)。