javascript停止twitter bootstrap选项卡链接激活

时间:2013-11-08 21:07:28

标签: javascript jquery twitter-bootstrap-3

我在我的应用中使用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仍然被解雇。

1 个答案:

答案 0 :(得分:2)

显然,bootstrap并不“喜欢”更改活动标签。

这是working jsFiddle(Bootstrap 3.0)。 和working jsFiddle(Bootstrap 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