js中tab左右滑动切换

<div class="tab-container">
  <div class="tab-buttons">
    <button onclick="switchTab(0)">Tab 1</button>
    <button onclick="switchTab(1)">Tab 2</button>
    <button onclick="switchTab(2)">Tab 3</button>
  </div>
  <div class="tab-content" id="tabContent">
    <div>Content for Tab 1</div>
    <div>Content for Tab 2</div>
    <div>Content for Tab 3</div>
  </div>
</div>

.tab-container {
  width: 100%;
  overflow: hidden;
}

.tab-buttons {
  display: flex;
  justify-content: space-around;
}

.tab-content {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.tab-content > div {
  min-width: 100%;
}

function switchTab(index) {
  const content = document.getElementById('tabContent');
  content.style.transform = `translateX(-${index * 100}%)`;
}