使用 css 实现 tab 切换时底部线条平滑滑动，核心在于利用 transform: translatex() 配合 transition 属性。具体做法是：将指示器（indicator）绝对定位在 tab 容器底部，通过 javascript 计算当前激活 tab 的索引和宽度，动态修改指示器的 left 或 transform 值。这样浏览器会自动对位置变化进行插值动画，从而实现平滑滑动效果。
如何设置 HTML 结构与基础 CSS 样式
首先需要构建一个包含 Tab 标题栏和对应内容区的结构。Tab 标题通常使用无序列表 <ul></ul> 包裹 <li> 元素，每个 <li> 内部放置按钮或链接。关键步骤是为 Tab 容器设置 position: relative，为底部指示器设置 position: absolute，并初始化其 bottom: 0、height 和 background-color。同时，必须给指示器添加 transition: transform 0.3s ease，这是实现平滑滑动的必要条件。
<div class="tab-container">
<div class="tab-header">
<ul class="tab-list">
<li class="tab-item active" data-index="0">Tab 1</li>
<li class="tab-item" data-index="1">Tab 2</li>
<li class="tab-item" data-index="2">Tab 3</li>
</ul>
<div class="tab-indicator"></div>
</div>
<div class="tab-content">
<div class="content-panel active">Content 1</div>
<div class="content-panel">Content 2</div>
<div class="content-panel">Content 3</div>
</div>
</div>
<style>
.tab-container {
position: relative;
width: 300px;
}
.tab-header {
position: relative;
display: flex;
border-bottom: 1px solid #ddd;
}
.tab-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.tab-item {
padding: 10px 20px;
cursor: pointer;
user-select: none;
}
.tab-indicator {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: #007bff;
transition: transform 0.3s ease;
/* 初始宽度设为0，后续由JS控制 */
width: 0;
}
.content-panel {
display: none;
padding: 10px;
}
.content-panel.active {
display: block;
}
</style>上述代码定义了基本的布局。注意 .tab-indicator 初始宽度为 0，这是因为我们将使用 transform: scaleX() 或 translateX() 来控制它的位置和大小，而不是直接改变 width，这样可以避免重排（Reflow），提升性能。实际开发中，通常先让指示器宽度等于第一个 Tab 的宽度，或者在 JS 初始化时计算好。
立即学习“前端免费学习笔记（深入）”；
如何用 JavaScript 计算位置并触发滑动
JavaScript 的作用是监听点击事件，获取目标 Tab 的位置信息，并更新指示器的样式。需要获取所有 .tab-item 元素，遍历它们以计算每个 Tab 相对于容器的偏移量。当用户点击某个 Tab 时，读取其 data-index 或 DOM 顺序，计算出对应的 translateX 值。计算公式通常为：targetLeft = targetTab.offsetLeft + (targetTab.offsetWidth - indicatorWidth) / 2（如果希望指示器居中）。更简单的做法是让指示器宽度始终等于当前 Tab 的宽度，然后只移动 left 或 translateX。
<script>
const tabItems = document.querySelectorAll('.tab-item');
const indicator = document.querySelector('.tab-indicator');
const container = document.querySelector('.tab-header');
// 初始化指示器位置和宽度
function initIndicator(index) {
const item = tabItems[index];
// 设置指示器宽度与当前Tab一致
indicator.style.width = `${item.offsetWidth}px`;
// 设置初始位置
indicator.style.transform = `translateX(${item.offsetLeft}px)`;
}
// 绑定点击事件
tabItems.forEach((item, index) => {
item.addEventListener('click', () => {
// 移除所有active类
tabItems.forEach(i => i.classList.remove('active'));
// 添加当前active类
item.classList.add('active');
// 更新指示器位置
// 这里使用transform来驱动动画
indicator.style.transform = `translateX(${item.offsetLeft}px)`;
// 可选：同步更新内容区显示
const contents = document.querySelectorAll('.content-panel');
contents.forEach(c => c.classList.remove('active'));
contents[index].classList.add('active');
});
});
// 页面加载后初始化
window.addEventListener('load', () => {
initIndicator(0);
});
// 窗口大小改变时重新计算，防止错位
window.addEventListener('resize', () => {
const activeIndex = Array.from(tabItems).findIndex(i => i.classList.contains('active'));
if (activeIndex !== -1) {
initIndicator(activeIndex);
}
});
</script>这段脚本确保了每次点击时，指示器都会平滑地移动到新的位置。关键点在于 indicator.style.transform = `translateX(${item.offsetLeft}px)` 这一行，由于 CSS 中已经定义了 transition，浏览器会自动处理中间的过渡帧。此外，添加了 resize 事件监听器，以确保在窗口缩放时指示器不会错位，因为 offsetLeft 的值会随容器宽度变化而变化。
如何处理 Tab 宽度不一致导致的滑动异常
当 Tab 标题文字长度不一时，各 <li> 元素的宽度不同，直接使用固定宽度的指示器会导致覆盖不全或溢出。解决方案是让指示器的宽度动态跟随当前激活 Tab 的宽度。在上面的 JS 代码中，initIndicator 函数里使用了 item.offsetWidth 来设置 indicator.style.width。这意味着每次切换 Tab 时，不仅 translateX 会变，width 也会变。为了让宽度变化也平滑，需要在 CSS 中为 width 也添加 transition，即 transition: transform 0.3s ease, width 0.3s ease。这样，指示器在滑动到下一个 Tab 时，会先调整宽度再滑动，或者同时进行，视觉效果更加自然。需要注意的是，如果 Tab 数量很多且宽度差异巨大，可能需要考虑使用 flex-grow 让 Tab 均分宽度，从而简化计算逻辑，但在自由宽度场景下，动态计算宽度是更通用的做法。
