使用jQuery更改活动的Bootstrap 3选项卡

Question

我正在尝试使用jQuery以编程方式更改选项卡.我尝试在这里实现@MasterAM给出的解决方案.但是,Chrome控制台会显示错误Uncaught TypeError: undefined is not a function

这是我的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>
</ul>

<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>
</div>

这是jQuery:

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

期望的结果是,如果我单击"单击我",则活动选项卡应更改为"samosas"选项卡.

我究竟做错了什么？

Answer 1

你遗漏了jQuery函数

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

小提琴