如何实现Bootstrap标签栏导航按钮背景平滑左右切换效果？

可以实现这种背景平滑左右移动的效果，纯CSS很难适配所有场景（比如标签宽度不固定、动态生成标签的情况），结合少量JavaScript来控制背景元素的位置过渡是更稳妥的方案。

修改后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

<div class="tab-nav-container">
  <ul class="nav nav-tabs" role="tablist">
      <li role="presentation"> <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a> </li>
      <li role="presentation"> <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false" class="">List 2</a> </li>
      <li role="presentation"> <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false" class="">List 3</a> </li>
      <li role="presentation"> <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false" class="">List 4</a> </li>
  </ul>
  <div class="tab-bg"></div>
</div>
<div class="tab-content">
    <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
  </div>
    <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
    <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
    <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

CSS

.tab-nav-container {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

li {
  margin: 0;
  display: block;
}

li:before {
  display:none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
  position: relative;
}

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
}

.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
}

.tab-bg {
  position: absolute;
  top: 10px;
  left: 0;
  height: calc(100% - 20px);
  background: #A700FF;
  border-radius: 10px;
  transition: all 0.3s ease;
  z-index: 0;
}

.info {
  padding: 30px;
  text-align: center;
}

JavaScript

// 初始化背景位置
function setTabBgPosition() {
  const activeTab = document.querySelector('.nav-tabs a.active');
  if (activeTab) {
    const tabBg = document.querySelector('.tab-bg');
    tabBg.style.left = activeTab.offsetLeft + 'px';
    tabBg.style.width = activeTab.offsetWidth + 'px';
  }
}

// 页面加载完成后初始化
window.addEventListener('load', setTabBgPosition);

// 监听Bootstrap标签切换完成事件
document.querySelectorAll('.nav-tabs a').forEach(tab => {
  tab.addEventListener('shown.bs.tab', setTabBgPosition);
});

实现原理 #

1. 给标签栏外层添加相对定位容器，内部新增绝对定位的.tab-bg元素作为可移动的背景载体
2. 页面加载时，根据当前激活的标签初始化背景的位置和宽度
3. 监听Bootstrap的shown.bs.tab事件（标签切换动画完成后触发），实时更新背景元素的位置和宽度，配合CSS的transition属性实现平滑移动效果
4. 原.active样式仅保留文字颜色，背景效果完全由.tab-bg实现

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