一个,请看一下这个演示 ,让我知道为什么我不能通过单击按钮来设置bootstrap 3 tabbs?

这是我的代码:

<div class="btn-group">
    <button class="btn btn-default" id="one">1</button>
    <button class="btn btn-default" id="two">2</button>
    <button class="btn btn-default" id="three">3</button>
    <button class="btn btn-default" id="four">4</button>
</div>
<div class="container">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home">1</a> </li>
        <li><a href="#profile">2</a></li>
        <li><a href="#messages">3</a></li>
        <li><a href="#settings">4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="home">One</div>
        <div class="tab-pane" id="profile">Two</div>
        <div class="tab-pane" id="messages">Three</div>
        <div class="tab-pane" id="settings">Four</div>
    </div>
</div>
<script>
 $('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});
$("#one").on("click", function () {
      ('#myTab a:last').tab('show');
});
</script>

谢谢

===============>>#1 票数:1 已采纳

您是否包括jQuery,Bootstrap CSS和JS?

编辑:

解决方案:您忘记了jQuery前面的“ $”符号。

$('#myTab a:last').tab('show');

查看以下JS Bin作为解决方案: http : //jsbin.com/fenapota/2/edit?html,输出

  ask by Suffii translate from so

未解决问题?本站智能推荐:

2回复

单击引导程序选项卡不起作用

我正在为网站使用引导程序,并使用它带来的选项卡功能。 我看了看文档,相信一切都做对了。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="styl
1回复

引导下拉菜单中的可单击选项卡和选项卡式内容

我正在尝试构建自定义的引导程序“选择”,它可以显示选项卡而不是简单列表。 因此,我在下拉列表中包含了html标签,效果很好。 问题是-我无法在不关闭整个下拉菜单的情况下切换标签或单击其中的内容。 当然,我可以在click上添加stopPropagation ,这样可以防止下拉菜单隐藏,但是
1回复

使用jQuery隐藏Bootstrap选项卡直到.active

您可以在此处查看我的所有代码: https : //jsfiddle.net/Magne/k6hqmtgo/ 我目前正在使用Bootstrap和jQuery。 我想要做的是隐藏所有选项卡,但第一个选项卡,只有在我使用“下一步”按钮访问一个选项卡后才显示它们。 然后保持可见 。 我
3回复

Bootstrap选项卡:表单的下一个和上一个按钮

我试图(最终)在几个Bootstrap 3.x选项卡上分割一个表单,但我遇到上一个和下一个按钮的问题。 当手动单击选项卡或使用按钮时,只有第一个下一个按钮起作用,有时选项卡内容在选项卡之间根本不会更改。
3回复

Bootstrap 3选项卡和HTML5表单验证

验证隐藏选项卡上的元素的经典问题。 我已经阅读了一百篇包含复杂解决方法的帖子。 有没有人有一个更简单,更优雅的解决方案,适用于一般案例? 即没有专门针对每种形式编码? HTML5承诺提供优雅的解决方案。 但是Tabs开玩笑了...... 谢谢 更多..? 从Boots
1回复

使用jQuery生成时,多个Bootstrap选项卡保持活动状态

我有以下具有我要使用jQuery选择的特殊属性的div 然后,我将这些div转换为单独的Bootstrap选项卡(&nav-tabs),并尝试将第一个选项卡窗格和nav-tab设置为活动状态。 结果如下: 每当我运行代码时,它都会按预期的方式进行结构化,这就是w3school的
1回复

Bootstrap 3导航药丸导航选项卡动态加载/显示

我创建了一个PHP函数,该函数允许jQuery为Bootstrap药丸/标签创建标签内容div。 我可以获取它以动态加载数据,但是我无法获取它以显示下面的数据。 他们自己的药丸/标签显示很好,一旦我单击相关标签,其内容就不会显示。 触点将加载到所需的选项卡中。 但没有给它一个活跃的课堂。
1回复

修改Bootstrap折叠:使内容显示在选项卡的右侧

我正在尝试修改Twitter Bootstrap的Collapse代码,以使内容显示在右侧,而不是在选项卡的正下方。 我已经完成了设置,但问题是单击另一个选项卡后,活动选项卡没有关闭。 下面是我的代码。 可以在这里查看问题: http : //www.reeldealoffshore.
2回复

如何在引导中具有用于引导选项卡的顶部和底部选项卡

我正在将引导程序选项卡应用于我的网页。 这里的挑战是,我在标签内容的顶部和底部都有标签。 我希望单击一次顶部时相应地更改底部选项卡,反之亦然。 标签内容正在更改,但是两个标签-顶部和底部需要同时改变,即当我单击顶部的“个人资料”时-它需要使底部的“个人资料”处于活动状态 我
1回复

来自其他页面时更改引导程序选项卡

我在引导选项卡式面板中有一个主题设置的页面。 我想从另一个页面链接到主题。 当我转到选项卡式页面时,单击一个按钮时,活动选项卡会自动更改吗? 即在page2.html上单击链接并转到page1.html上的tab2或tab3 在另一页上应该是