CSS로 슬라이딩 탭 효과를 얻는 팁과 방법

<div class="tab-container">
  <div class="tabs">
    <button class="tab-item active">标签一</button>
    <button class="tab-item">标签二</button>
    <button class="tab-item">标签三</button>
  </div>
  <div class="tab-content">
    <div class="tab-content-item active">
      <p>标签一的内容</p>
    </div>
    <div class="tab-content-item">
      <p>标签二的内容</p>
    </div>
    <div class="tab-content-item">
      <p>标签三的内容</p>
    </div>
  </div>
</div>

.tab-container {
  position: relative;
}

.tabs {
  display: flex;
}

.tab-item {
  flex: 1;
  padding: 10px;
  background-color: #f0f0f0;
  border: none;
  outline: none;
  cursor: pointer;
}

.tab-item.active {
  background-color: #ccc;
}

.tab-content {
  width: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
}

.tab-content-item {
  width: 100%;
  flex-shrink: 0;
}

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

.tab-content {
  width: 300%; /* 每个标签内容项的宽度百分比为100% */
  display: flex;
  transition: transform 0.3s; /* 过渡效果，动画时间为0.3秒 */
}

.tab-content-item {
  width: 33.33%; /* 三个标签内容项，每个宽度为33.33% */
  flex-shrink: 0;
}

let tabItems = document.querySelectorAll('.tab-item');
let tabContentItems = document.querySelectorAll('.tab-content-item');

tabItems.forEach(function(item, index) {
  item.addEventListener('click', function() {
    document.querySelector('.tab-item.active').classList.remove('active');
    document.querySelector('.tab-content-item.active').classList.remove('active');
    
    this.classList.add('active');
    tabContentItems[index].classList.add('active');
    
    let translateX = -index * 33.33; // 计算标签内容容器的左偏移量
    document.querySelector('.tab-content').style.transform = `translateX(${translateX}%)`;
  });
});