如何在twitter-bootstrap中有条件地停止药片的数据切换？

Question

<ul class="nav nav-pills nav-stacked" id="moduleList">
    <li class="">
        <a href="#" onclick="return loadModule(this)" data-toggle="pill" data-value="user">User</a></li>
    <li>
        <a href="#" onclick="return loadModule(this)" data-toggle="pill" data-value="Blog">Blog</a>
    </li>
</ul>

我的网站上有上述引导药丸。活动项目更改，脚本执行以加载页面中的活动项目。在某些情况下，我不想更改活动项，并且将在onclick函数loadModule（）内做出决定。我怎么能这样做？

Answer 1

从标记中删除 data-toggle =“pill”，然后在“loadModule”中将所选“li”的类更改为活动或清空。这是一个例子：

function loadModule(a) {

  //your logic/////

  $('#liUser').attr('class', '');
  $('#liBlog').attr('class', 'active');
}

<ul class="nav nav-pills nav-stacked" id="moduleList">
  <li id="liUser" class="">
    <a href="#" onclick="return loadModule(this)" data-value="user">User</a>
  </li>
  <li id="liBlog">
    <a href="#" onclick="return loadModule(this)" data-value="Blog">Blog</a>
  </li>
</ul>

Answer 2

我不知道是否对你有用。使用jQuery试试这个：

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

然后删除点击和数据切换属性。您可以在委托回调中添加一些逻辑。