Twitter Bootstrap药丸的问题

Issue with Twitter Bootstrap pills

本文关键字：问题 Bootstrap Twitter      更新时间：2023-12-10

我的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片段（加载在文档上，准备应用于所有药丸）

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

问题1:单击href="#c"时，没有添加活动类。在这个页面上发布的fiddle和代码中，您没有将data-toggle="pill"属性添加到c链接中。

问题2:检查boostrap选项卡javascript文件时，请注意插件底部的以下代码：

     /* 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");
});​
相关文章：