JavaScript 阻止 Twitter 引导选项卡链接激活

javascript stop twitter bootstrap tab link from activating

本文关键字：链接 激活 选项 阻止 Twitter JavaScript      更新时间：2023-09-26

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

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

这是工作的jsFiddle（Bootstrap 3.0）。和工作的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', '');
  });
});

供图。

相关文章：