Changing active Bootstrap 3 tab using jQuery

I was experimenting with programatically changing tabs using jQuery. I tried to implement the solution given by @MasterAM here. However, the Chrome console shows the error Uncaught TypeError: undefined is not a function

Here is my HTML:

<div id="click-me-div">Click Me</div>

 <ul class="nav nav-tabs">
    <li class="active"><a href="#fruits" data-toggle="tab">I like Fruits</a></li>
    <li><a href="#veggies" data-toggle="tab">I like Veggies Too</a></li>
    <li><a href="#samosas" data-toggle="tab">But Samosa's Rock</a></li>

<div class="tab-content">
    <div class="tab-pane active" id="fruits">Apple, Kiwi, Watermellon</div>
    <div class="tab-pane" id="veggies">Kale, Spinach, Pepper</div>
    <div class="tab-pane" id="samosas">Awesome, Spine Tingling, Explosive</div>

And here is the jQuery:

$(document).ready(function() {
    $("#click-me-div").click(function() {
        alert('yes, the click actually happened');
        ('.nav-tabs a[href="#samosas"]').tab('show');

The desired outcome is that, if I click “Click Me”, the active tab should change to the “samosas” tab.

What am I doing wrong?

You left out the jQuery function

$(document).ready(function() {
    $("#click-me-div").click(function() {
        alert('yes, the click actually happened');
        $('.nav-tabs a[href="#samosas"]').tab('show');


Try this code

You can use onclick() function and path id name of tab.

<a onclick='ActivTab("Security")' class="nav-link" data-toggle="tab" href="#Security" aria-controls="profile" role="tab" id='Security'>Security</a>

         function ActivTab(id){
//           $('.nav-tabs a[href="#' + id + '"]').tab('show');
             $('.nav-tabs a[href="#' + id + '"]').trigger('click');

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   @types/styled-components Duplicate identifier FormData

Similar Posts