从内部 <a href> 链接显示选项卡

Question

我使用 nav-tabs，但在从位于选项卡 1 内容内的链接的选项卡之间切换时出现问题。 我想在此链接中从标签 1 切换到标签 3，而不是点击标签的标题。

我已经尝试过这个解决方案（在后台，How to open a tab from external link?）但我收到了这个错误：“Uncaught TypeError: $ is not a function”。

我正在使用 jquery 3.5.1 和 bootstrap 4.4.1

    <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="true">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="true">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" Xdata-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>

Answer 1

如果您将 JQuery 与可能包含其他 JS 库或框架的工具一起使用，则可能由于多个库使用 $ 而发生冲突。

解决方案是像这样包含 JQuery：

jQuery(document).ready(function ($) {
  // your JQuery code
});