如何为Bootstrap nav-tabs标签页添加激活态平滑滑动切换效果

实现方案 #

要实现激活态平滑滑动的效果，你需要把原本每个标签独立控制的高亮块抽成公共的滑动元素，配合CSS过渡和JS动态计算位置实现效果，具体修改如下：

第一步：调整CSS代码

先删除原CSS中.tab .nav-tabs li a:before/after相关的激活态样式，新增/修改以下CSS：

.tab .nav-tabs{
    /* 原有属性保留，新增以下属性 */
    position: relative;
    border-radius: 50px;
}
/* 新增滑动高亮滑块样式 */
.tab .nav-tabs .tab-slider {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #ffffff;
    border: 2px solid #ffc20e;
    border-radius: 50px;
    transition: all 0.3s ease;
    z-index: 0;
}
.tab .nav-tabs li a{
    /* 原有属性保留，修改以下两项 */
    z-index: 1;
    background: transparent;
}

第二步：修改HTML结构

在标签列表容器内部末尾新增滑块元素：

<ul class="nav nav-tabs about-sii-tab" role="tablist">
    <!-- 原有li标签全部保持不变 -->
    <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Heading</a></li>
    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Heading 2</a></li>
    <!-- 其他li标签不变 -->
    <!-- 新增滑动块 -->
    <div class="tab-slider"></div>
</ul>

第三步：添加JS控制逻辑

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.tab-slider');
  
  // 更新滑块位置的公共方法
  function updateSlider(activeTab) {
    const tabWidth = activeTab.offsetWidth;
    const tabLeft = activeTab.offsetLeft;
    slider.style.width = `${tabWidth}px`;
    slider.style.left = `${tabLeft}px`;
  }
  
  // 页面加载完成后初始化滑块到默认激活标签位置
  const initActiveTab = document.querySelector('.nav-tabs li.active');
  updateSlider(initActiveTab);
  
  // 兼容Bootstrap原生tab切换事件，切换时更新滑块位置
  document.querySelectorAll('a[data-toggle="tab"]').forEach(tab => {
    tab.addEventListener('shown.bs.tab', function (e) {
      const currentActiveTab = e.target.closest('li');
      updateSlider(currentActiveTab);
    })
  })
})

适配说明

如果你的项目用的是不同版本的Bootstrap，只需对应调整tab切换的监听事件名即可；如果标签会随窗口尺寸变化宽度，可额外监听resize事件触发updateSlider重新计算位置。

内容的提问来源于stack exchange，提问作者SandyS