Bootstrap4 nav-tabs点击标签内部a链接跳转指定标签页报错问题

• Uncaught TypeError: $ is not a function 报错的核心原因是jQuery未正确加载，常见场景包括：jQuery引入顺序晚于Bootstrap JS、引入路径错误、jQuery开启了noConflict模式释放了$标识符。
• 内部链接无法切换标签的直接原因是跳转链接属性存在书写错误：<a href="#booking" Xdata-toggle="tab" class="tab-link"> 中多写了前缀X，导致data-toggle="tab"属性未生效，Bootstrap无法识别该链接为标签切换触发器。

1. 调整资源加载顺序，确保先加载jQuery，再加载Bootstrap JS文件，示例引入写法：

<!-- 先引入jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<!-- 再引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>

2. 修正跳转链接的属性，删除data-toggle前的多余X：

<a href="#booking" data-toggle="tab" class="tab-link">link to tab3</a>

3. 如果存在jQuery冲突（$被其他脚本占用），可以用以下两种方案处理：

• 直接用jQuery标识符代替$编写代码
• 用自执行函数隔离作用域，手动触发标签切换：

(function($){
  $('.tab-link').on('click', function(e){
    e.preventDefault();
    $($(this).attr('href')).tab('show');
  })
})(jQuery);

<!-- 资源引入 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">

<!-- 标签结构 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
 <li class="nav-item"><a class="nav-link active" id="pricing-tab" href="#pricing" data-toggle="tab" role="tab" aria-controls="pricing" aria-selected="true">Pricing</a></li>
 <li class="nav-item"><a class="nav-link" id="details-tab" href="#details" data-toggle="tab" role="tab" aria-controls="details" aria-selected="false">Details</a></li>
 <li class="nav-item"><a class="nav-link" id="booking-tab" href="#booking" data-toggle="tab" role="tab" aria-controls="booking" aria-selected="false">Booking</a></li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane tab-bg fade show active" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
    pricing tab content and <a href="#booking" data-toggle="tab" class="tab-link">link to tab3</a>
  </div>
  <div class="tab-pane tab-bg fade" id="details" role="tabpanel" aria-labelledby="details-tab">details tab content</div>
  <div class="tab-pane fade" id="booking" role="tabpanel" aria-labelledby="booking-tab">booking tab content</div>
</div>

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