Question

我的Bootstrap标签/药片插件存在问题。

我想展示所有div（a，b和c），因此我不需要标签来隐藏它们。我想让药片让用户在页面上从一个部分移动到另一个部分。问题：

当用户点击该链接时，不显示内容（容器a和b的示例）。
显示了删除data-toggle="pill"内容，但链接未标记为.active类。

我准备了这个小提琴：http://jsfiddle.net/DLRmp/来告诉你这个问题。希望你能帮助我，文件似乎对药片有点差：

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a data-toggle="pill" href="#a">a</a></li>
    <li class=""><a data-toggle="pill" href="#b">b</a></li>
    <li class=""><a href="#c">c</a></li>
</ul>

<div id="a">I'm not working: when user clicks the link nothing happens.
    But at least link is marked as active!</div>

<div id="b">Me too. I'm not working: when user clicks the link nothing happens. 
    But at least link is marked as active! </div>

<div id="c">I'm working, but link is not marked as active!</div>

Answer 1

我使用这个javascript片段（加载在准备好应用于所有药片的文件上）

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});

Answer 2

问题1：当您点击href="#c"时，系统未添加任何有效课程。在您在此页面上发布的小提琴和代码中，您未将data-toggle="pill"属性添加到c链接。

问题2：检查boostrap tab javascript file时，请注意其插件底部的以下代码：

     /* TAB DATA-API
  * ============ */

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  })

特别注意使用e.preventDefault()。我相信这就是为什么你的“药丸”链接没有跳转到页面内容的原因。

可能的解决方案：我想还有其他方法可以完成你想要做的事情，但是一个选项就是使用你自己的jquery函数来使用.active类

http://jsfiddle.net/3aANQ/3/

$(".nav-stacked li").click(function() {
    $(".nav-stacked li").removeClass("active"); 
    $(this).addClass("active");
});

Twitter Bootstrap药丸问题

2 个答案: