Question

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

但是，它无法正常工作。当我点击标签（例如标签2）时，它会根据需要激活，但我无法再点击它。当我点击标签1时，标签1被激活，但标签2仍然被激活。

澄清：

开始

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

点击标签2

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

点击标签1

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

Answer 1

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

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

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

Answer 2

遇到完全相同的问题，实际上需要添加＆＃39; active＆＃39;类的选项卡窗格也是如此。

＆＃13;

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

＆＃13;

在此处找到参考资料：http://getbootstrap.com/javascript/#fade-effect

Bootstrap选项卡导航无法正常工作

2 个答案: