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

更改活动的

关注

发信

关注(28)粉丝(399)

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

本文介绍了使用 jQuery 更改活动的 Bootstrap 3 选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

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

这是我的 HTML:


点击我
<ul class="nav nav-tabs"><li class="active"><a href="#fruits" data-toggle="tab">我喜欢水果</a></li><li><a href="#veggies" data-toggle="tab">我也喜欢蔬菜</a></li><li><a href="#samosas" data-toggle="tab">但是萨摩萨的岩石</a></li><div class="tab-content"><div class="tab-pane active" id="fruits">苹果、猕猴桃、西瓜</div><div class="tab-pane" id="veggies">羽衣甘蓝、菠菜、胡椒</div><div class="tab-pane" id="samosas">真棒，脊椎刺痛，爆炸</div>

这里是 jQuery:

$(document).ready(function() {$("#click-me-div").click(function() {alert('是的，点击确实发生了');('.nav-tabs a[href="#samosas"]').tab('show');});});

想要的结果是，如果我点击点击我"，活动标签应该变成samosas"标签.

我做错了什么?

解决方案

您遗漏了 jQuery 函数

$(document).ready(function() {$("#click-me-div").click(function() {alert('是的，点击确实发生了');$('.nav-tabs a[href="#samosas"]').tab('show');});});

小提琴

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

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');
    });
});

Fiddle

这篇关于使用 jQuery 更改活动的 Bootstrap 3 选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

09-06 20:38