最近在網上看到一種很酷的效果，用jquery實現的觸屏滑動選項卡，于是我也想嘗試一下。

$(function() {
// 默認展示第一個選項卡
var activeIndex = 0;
$('.slider-pane').eq(activeIndex).addClass('active');
// 綁定touchstart事件
$('.slider-wrapper').on('touchstart', function(event) {
// 記錄觸屏開始時的坐標
startX = event.originalEvent.changedTouches[0].pageX;
startY = event.originalEvent.changedTouches[0].pageY;
});
// 綁定touchmove事件
$('.slider-wrapper').on('touchmove', function(event) {
event.preventDefault();
// 記錄滑動過程中的坐標
moveEndX = event.originalEvent.changedTouches[0].pageX;
moveEndY = event.originalEvent.changedTouches[0].pageY;
X = moveEndX - startX;
Y = moveEndY - startY;
// 判斷滑動方向
if (Math.abs(X) > Math.abs(Y) && X > 0) {
// 向右滑動
activeIndex--;
if (activeIndex < 0) {
activeIndex = $('.slider-pane').length - 1;
}
changeTab(activeIndex);
} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
// 向左滑動
activeIndex++;
if (activeIndex >= $('.slider-pane').length) {
activeIndex = 0;
}
changeTab(activeIndex);
}
});
// 切換選項卡
function changeTab(index) {
$('.slider-pane').eq(index).addClass('active').siblings().removeClass('active');
}
});

上述代碼中，首先給第一個選項卡添加一個active類，在觸屏滑動事件中獲取滑動開始時的坐標和滑動進行中的坐標，通過判斷滑動方向來切換選項卡。

通過這個實現，我們可以在移動端的頁面中實現簡潔的選項卡效果，提高用戶體驗。