如何使用 JavaScript 实现选项卡内容的手指滑动切换效果？

  
选项卡1
  
选项卡2
  
选项卡3


选项卡1的内容
选项卡2的内容
选项卡3的内容

const tabsContainer = document.querySelector('.tabs');
let startX = 0;
let dist = 0;

tabsContainer.addEventListener('touchstart', handleTouchStart, false);
tabsContainer.addEventListener('touchmove', handleTouchMove, false);

function handleTouchStart(event) {
  startX = event.touches[0].clientX;
}

function handleTouchMove(event) {
  dist = event.touches[0].clientX - startX;
}

tabsContainer.addEventListener('touchend', handleTouchEnd, false);

function handleTouchEnd(event) {
  const threshold = 50;

  if (Math.abs(dist) > threshold) {
    if (dist > 0) {
      // 向右滑动，切换到上一个选项卡
      switchToTab('prev');
    } else {
      // 向左滑动，切换到下一个选项卡
      switchToTab('next');
    }
  }
  
  startX = 0;
  dist = 0;
}

function switchToTab(direction) {
  const activeTab = document.querySelector('.tab.active');
  const activeContent = document.querySelector('.tab-content.active');

  const nextTab = direction === 'next' ? activeTab.nextElementSibling : activeTab.previousElementSibling;
  const nextContent = document.getElementById(nextTab.dataset.tab);

  activeTab.classList.remove('active');
  activeContent.classList.remove('active');

  nextTab.classList.add('active');
  nextContent.classList.add('active');
}