Bootstrap标签导航无法正常工作

根据http://getbootstrap.com/javascript/#tabs和http://getbootstrap.com/components/#nav-tabs，我做了一个非常简单的bootstrap标签导航设置。Bootstrap标签导航无法正常工作

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

来源

2014-03-31 Acrotygma

@Pavlo我这样做，是的。但没有效果，除了第一个元素在启动时处于活动状态。 :( – Acrotygma

其实我没有看到你的代码的任何问题，检查这一个http://jsfiddle.net/gfb3d/ – Pavlo

@Pavlo是的，我也没有看到任何东西。可能是我的引导CSS ，但是我没有做任何其他事情从当前版本复制bootstrap.css：/ – Acrotygma

使用引导程序的data- *语法，除非要手动显示选项卡（假设您想在单击按钮或运行某个函数时显示选项卡，而不是点击它在导航）。

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

尝试取出单击处理程序，只有在引导的data-toggle="tab"

来源

2014-03-31 16:18:21 CaseyWebb

完美也应该不起作用，我只是注意到你在'e.preventDefault（）'之后丢失了一个分号。根据您使用的浏览器，这可能会打破页面;检查日志，看看你是否有任何错误。 – CaseyWebb

会见完全相同的问题靠，居然需要“活动”类添加到选项卡窗格为好。

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

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

来源

2015-08-06 06:15:57

Bootstrap标签导航无法正常工作

回答

相关问题