Bootstrap Pills切换失效求助：点击后内容无法切换

问题根源 #

你当前的代码存在三个关键问题：

• 用了Bootstrap 5框架，但标签属性还是Bootstrap 4的data-toggle，Bootstrap 5已将所有这类属性前缀改为data-bs-
• 额外引入了旧版本的Popper.js，而Bootstrap 5的bootstrap.bundle.min.js已经内置适配的Popper，两者冲突导致功能失效
• 自定义的点击事件只处理了标签的active样式，没有联动切换内容面板，反而可能干扰Bootstrap原生逻辑

修复步骤 #

1. 替换Bootstrap属性前缀
   将所有data-toggle="pill"改为data-bs-toggle="pill"，这是Bootstrap 5的标准属性格式。

2. 移除冲突的Popper.js引入
   删除header里这行多余的代码：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
   

3. 删除自定义点击事件代码
   删掉页面底部那段只切换标签样式的JS，Bootstrap原生JS会自动处理标签与内容的联动逻辑。

修正后的完整代码 #

header.ejs 代码

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- BOOTSTRAP AND CSS  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/styles.css">

目标页面代码

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Test content 1</div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Test content 2</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Test content 3</div>
</div>

修改完成后，点击Pills标签就能正常切换对应内容面板了，Bootstrap的原生JS会自动处理样式切换和内容显示逻辑。

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