I use nav-tabs but I have a problem switching between tabs from link which are located inside the contents of tab 1. I want to switch from tab 1 to tab 3 clickin in this link instead of clicking the tab's title.
I've tried this solution (Under the hood, How to open a tab from external link?) but I get this error: "Uncaught TypeError: $ is not a function".
I'm using jquery 3.5.1 and 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>
If you are using JQuery with a tool that might include other JS libraries or frameworks, it is possible that conflicts occur due to several libraries using $.
Solution is to include JQuery like this:
jQuery(document).ready(function ($) {
// your JQuery code
});