如何使用 JavaScript 实现选项卡内容的手指滑动切换效果同时限制在容器内？

  

    
标签1
    
标签2
    
标签3
  
  

    
内容1
    
内容2
    
内容3
  

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.tabs {
  display: flex;
}

.tab {
  flex: 1;
  text-align: center;
}

.content {
  width: 300%;
  display: flex;
}

.panel {
  flex: 1;
  text-align: center;
}

const container = document.querySelector('.container');
const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.panel');

let startX = 0;
let currentX = 0;

container.addEventListener('touchstart', (event) => {
  startX = event.touches[0].clientX;
});

container.addEventListener('touchmove', (event) => {
  event.preventDefault();
  currentX = event.touches[0].clientX;
});

container.addEventListener('touchend', () => {
  const deltaX = currentX - startX;
  const threshold = container.offsetWidth / 3;

  if (deltaX > threshold && currentIndex > 0) {
    currentIndex--;
  } else if (deltaX < -threshold && currentIndex < tabs.length - 1) {
    currentIndex++;
  }

  const translateX = -currentIndex * 100;

  tabs.forEach((tab) => tab.classList.remove('active'));
  panels.forEach((panel) => panel.classList.remove('active'));

  tabs[currentIndex].classList.add('active');
  panels[currentIndex].classList.add('active');

  container.querySelector('.content').style.transform = `translateX(${translateX}%)`;
});