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}%)`;  });});