2

我对 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>
4

2 回答 2

4

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

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});
于 2012-07-30T12:51:15.110 回答
0

问题 1：当您单击 时href="#c"，没有添加活动类。在此页面上发布的小提琴和代码中，您没有将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(). 我相信这就是为什么您的“药丸”链接没有跳转到页内内容的原因。

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

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

$(".nav-stacked li").click(function() {
    $(".nav-stacked li").removeClass("active"); 
    $(this).addClass("active");
});​
于 2012-07-20T00:36:44.167 回答