Bootstrap data-toggle失效 标签页与导航下拉无法工作

两个问题共同导致交互失效：

• 核心原因：Bootstrap交互组件依赖加载错误。Bootstrap 4版本的标签页、下拉菜单组件需要依赖jQuery、Popper.js才能运行，且必须按照jQuery → Popper.js → Bootstrap JS的顺序引入脚本，漏引、顺序颠倒都会导致所有通过data-*属性绑定的交互全部失效，这也是标签页和下拉按钮同时失效的根源。如果你使用的是Bootstrap 5版本，旧版的data-toggle属性已经被替换为data-bs-toggle，属性名写错也会导致交互不触发。
• 代码逻辑错误：你给所有标签导航的nav-link元素都加了active类，按照Bootstrap的组件规则，只有默认激活展示的第一个标签需要添加active类，其余导航项携带该类会打乱组件的状态切换逻辑。

• 修正依赖引入
  如果使用Bootstrap 4版本，在页面</body>闭合标签前按顺序引入本地存储的对应脚本，不要调整顺序、不要重复引入：

<!-- 优先引入jQuery脚本 -->
<script src="/your-local-path/jquery.slim.min.js"></script>
<!-- 其次引入Popper.js脚本 -->
<script src="/your-local-path/popper.min.js"></script>
<!-- 最后引入Bootstrap JS脚本 -->
<script src="/your-local-path/bootstrap.min.js"></script>

如果使用Bootstrap 5版本，不需要引入jQuery，将代码中所有data-toggle="tab"、data-toggle="dropdown"替换为data-bs-toggle="tab"、data-bs-toggle="dropdown"，同时引入本地存储的Bootstrap 5 JS bundle文件（已内置Popper能力）即可。

• 修正标签导航的类名
  删除其余三个非默认激活导航项上的active类，修正后的导航代码如下：

<ul class = "nav nav-tabs">
    <li class = "nav-item">
        <a class = "nav-link active" href = "#peter" role = "tab" data-toggle = "tab">Peter Pan, CEO</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#witherspoon" role = "tab" data-toggle = "tab">Dhanasekaran Witherspoon, CFO</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#tang" role = "tab" data-toggle = "tab">Agumbe Tang, Chief Taste Officer</a>
    </li>
    <li class = "nav-item">
        <a class = "nav-link" href = "#alberto" role = "tab" data-toggle = "tab">Alberto Somayya, Executive Chef</a>
    </li>
</ul>

修改完成后刷新页面即可恢复正常，标签页切换、下拉按钮触发的交互都会正常运行。

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