jquery選項卡左右切換是一種常見的網頁設計元素，可以讓用戶方便地切換不同的選項卡內容。下面我們來看一下如何使用jquery來實現選項卡的左右切換效果。

<!--HTML結構-->
<div class="tab-container">
<div class="tabs">
<ul>
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</div>
<div class="tab-content">
<div class="tab-pane active">選項卡1內容</div>
<div class="tab-pane">選項卡2內容</div>
<div class="tab-pane">選項卡3內容</div>
</div>
</div>
<!--CSS樣式-->
.tab-container {
position: relative;
}
.tabs {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.tabs ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.tabs ul li {
margin-right: 10px;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.tabs ul li.active {
background-color: #444;
color: #fff;
}
.tab-content {
position: relative;
}
.tab-pane {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px;
border: 1px solid #ccc;
}
.tab-pane.active {
display: block;
}
.left-arrow,
.right-arrow {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
height: 40px;
margin: auto;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
cursor: pointer;
}
.left-arrow {
left: 0;
}
.right-arrow {
right: 0;
}
<!--Jquery代碼-->
$(function() {
var $tabs = $(".tabs ul li");
var $tabContent = $(".tab-content .tab-pane");
var currentIndex = 0; // 初始化當前選中的選項卡下標
// 切換選項卡內容
$tabs.click(function() {
$(this)
.addClass("active")
.siblings()
.removeClass("active");
currentIndex = $(this).index();
$tabContent
.eq(currentIndex)
.addClass("active")
.siblings()
.removeClass("active");
});
// 左右切換選項卡
$(".left-arrow").click(function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = $tabs.length - 1;
}
$tabs.eq(currentIndex).click();
});
$(".right-arrow").click(function() {
currentIndex++;
if (currentIndex > $tabs.length - 1) {
currentIndex = 0;
}
$tabs.eq(currentIndex).click();
});
});