如何解决Bootstrap与jQuery冲突导致tab失效的问题？

问题根源 #

你的代码里用的是data-mdb-toggle="pill"，这是**Material Design for Bootstrap（MDB）**的Tab组件属性，MDB的JS功能依赖jQuery，但如果加载顺序错误、版本不兼容或重复加载jQuery，都会导致Tab组件失效。

修复方案 #

• 严格控制加载顺序
  必须按「jQuery → MDB/Bootstrap JS」的顺序加载，MDB需要先找到jQuery才能完成组件初始化。示例加载顺序：

  <!-- 先加载jQuery -->
  <script src="jquery.min.js"></script>
  <!-- 再加载MDB的JS文件 -->
  <script src="mdb.min.js"></script>
  

• 匹配兼容的jQuery版本
  MDB不同版本对jQuery有版本要求：

  • MDB 5.x：推荐jQuery 3.6.x及以上版本
  • MDB 4.x：兼容jQuery 3.x/2.x（不推荐1.x）
    避免使用过于老旧或未经过兼容性测试的jQuery版本。

• 禁止重复加载jQuery
  页面中多次加载jQuery会覆盖MDB绑定的事件监听，导致Tab组件无法响应。检查页面所有脚本，确保只引入一次jQuery。

• 手动初始化Tab组件
  如果自动初始化失效，可以用jQuery手动绑定Tab切换逻辑：

  $(document).ready(function() {
    $('#ex1 a[data-mdb-toggle="pill"]').on('click', function(e) {
      e.preventDefault();
      $(this).tab('show');
    });
  });
  

• 切换为原生Bootstrap Tab属性（可选）
  如果不需要MDB的样式，将data-mdb-toggle="pill"替换为Bootstrap原生的data-bs-toggle="pill"（Bootstrap 5），原生Bootstrap 5可以和jQuery共存，且无需额外依赖：

  <a
    class="nav-link active"
    id="ex1-tab-1"
    data-bs-toggle="pill"
    href="#ex1-pills-1"
    role="tab"
    aria-controls="ex1-pills-1"
    aria-selected="true"
  >Tab 1</a>
  

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