javascript 阻止 twitter 引导选项卡链接激活答案

【问题标题】：javascript stop twitter bootstrap tab link from activatingjavascript 阻止 twitter 引导选项卡链接激活
【发布时间】：2013-11-08 21:07:28
【问题描述】：

我在我的应用中使用 TB 3。我正在使用一些导航选项卡，我想默认禁用一些如下（这不是下拉菜单的一部分）：

<ul class="nav">
    <li class="disabled"><a href="#tab" data-toggle="tab">Tab</a></li>
</ul>

我的禁用功能：

$('.nav li.disabled').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

目标是在满足条件时删除.disabled，以便重新启用或再次点击链接。这只会更改选项卡的外观，不会更改功能。进一步的测试表明，无论我在这里做什么，shown.bs.tab 仍然会被解雇。

【问题讨论】：

使用标签样式和编写自己的标签更改代码可能更简单
既然链接应该是无效的，为什么它不响应点击是一个问题？
删除.disabled 类后，我希望链接可以点击或重新启用。
喂？你检查我更新的答案了吗？
我无法让它工作。相反，我只是用display:none 隐藏了元素，直到我的对象在 DOM 中准备好

标签： javascript jquery twitter-bootstrap-3

【解决方案1】：

显然，引导程序不“喜欢”更改活动选项卡。

这是working jsFiddle (Bootstrap 3.0)。还有working jsFiddle（引导程序 2.3.2）。想法是这样的：

$(document).ready(function() {

  $('#store-tab').attr('class', 'disabled');
  $('#bank-tab').attr('class', 'disabled active');

  $('#store-tab').click(function(event) {
    if ($(this).hasClass('disabled')) {
      return false;
    }
  });
  $('#bank-tab').click(function(event) {
    if ($(this).hasClass('disabled')) {
      return false;
    }
  });

  $('.selectKid').click(function(event) {
    $('li').removeAttr("disabled");
    $('#bank-tab').attr('class', 'active');
    $('#store-tab').attr('class', '');
  });
});

Courtesy of.

【讨论】：

与 Bootstrap 2.3.2 的工作方式相同。我在我的回答中听过新的小提琴。