Twitter Bootstrap 药丸的问题答案

【问题标题】：Issue with Twitter Bootstrap pillsTwitter Bootstrap 药丸的问题
【发布时间】：2012-07-19 20:04:36
【问题描述】：

我在使用 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>

【问题讨论】：

标签： javascript jquery jquery-plugins twitter-bootstrap

【解决方案1】：

我使用这个 javascript sn-p（加载在准备适用于所有药丸的文档上）

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

【讨论】：

【解决方案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");
});

【讨论】：