javascript - 如何有条件地停止 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');
});

然后删除 click 和 data-toggle 属性。您可以在委托回调中添加一些逻辑。