引导选项卡导航无法正常工作答案

【问题标题】：Bootstrap tab navigation not working correctly引导选项卡导航无法正常工作
【发布时间】：2014-03-31 14:01:08
【问题描述】：

我根据http://getbootstrap.com/javascript/#tabs 和http://getbootstrap.com/components/#nav-tabs 为引导标签导航做了一个非常简单的设置。

<ul class="nav nav-tabs" id="test_tab">
    <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane" id="tab1">
        <span>Hello 1!</span>
    </div>
    <div class="tab-pane" id="tab2">
        <span>Hello 2!</span>
    </div>
</div>

$(function () {
    $('#test_tab a').click(function (e) {
        console.info("clicked!");
        e.preventDefault()
        $(this).tab('show');
    });
});

但是，它无法正常工作。当我单击一个选项卡（例如 tab2）时，它会根据需要被激活，但是我无法再次单击它。当我点击标签 1 时，标签 1 被激活，但标签 2 也保持激活状态。

澄清：

开始

Tab 1 | Tab 2
-----------------

点击选项卡 2

Tab 1 | Tab 2
-----------------
Hello 2!

点击标签 1

Tab 1 | Tab 2
-----------------
Hello 2!
Hello 1!

【问题讨论】：

@Pavlo 我做到了，是的。但没有效果，除了第一个元素在启动时处于活动状态。 :(
其实我看不出你的代码有什么问题，看看这个jsfiddle.net/gfb3d
@Pavlo 是的，我也看不到任何东西。我的引导 CSS 可能有问题，但除了从当前版本复制 bootstrap.css 之外，我什么也没做。 ://
你错过了包含 bootstrap.js :) 在发布问题之前尝试使用 Firebug 并查看错误控制台
@Pavlo Bootstrap.js 包含在内并且可以找到。在我的主页上：@Scripts.Render("~/js/bootstrap") -> routes to "~/Scripts/bootstrap.js" 呈现为 '/js/bootstrap?v=vQ_Gu0D_BsZTQ6TY6akag53T-LlmZIdGmqSBMX-BKt41' （页面源代码），它后面有缩小的 bootstrap.js。

标签： javascript jquery html twitter-bootstrap tabs

【解决方案1】：

使用 bootstrap 的 data-* 语法，你不必编写任何 JS，除非你想手动显示一个选项卡（比如说你想在单击按钮或运行一个函数时显示一个选项卡，而不是单击它在导航中）。

我无法在 jsFiddle 中重现您的问题，但我怀疑是点击绑定手动显示选项卡 1，并阻止引导程序隐藏其他选项卡。

尝试删除点击处理程序，并仅依赖引导程序的data-toggle="tab"

【讨论】：

如果这不起作用，我刚刚注意到您在e.preventDefault() 之后缺少一个分号。根据您使用的浏览器，这可能会破坏页面；检查日志以查看是否有任何错误。

【解决方案2】：

遇到了完全相同的问题，实际上还需要将“活动”类添加到选项卡窗格中。

<div class="tab-pane active" id="tab1">
        <span>Hello 1!</span>
</div>

在这里找到参考：http://getbootstrap.com/javascript/#fade-effect

【讨论】：