Question

我的bootstrap导航标签如下：

    <ul class="nav nav-tabs">
   <li id="tab_a" class="active"><a data-toggle="tab" href="#ABC"><strong>ABC</strong></a></li>
   <li><a data-toggle="tab" href="#PQR">PQR</a></li>
   <li><a data-toggle="tab" href="#XYZ">XYZ</a></li>
   </ul>

我正在尝试使用jQuery按如下方式停用 ABC 标签，但它不应该是可点击的：

$('#tab_a a').attr('disabled', true);

它不起作用!!

Answer 1

我在JSFiddle中试过这个，它应该可以工作：

$('#tab_a').find('a').removeAttr('data-toggle');

Answer 2

已禁用不是锚点的有效属性。以下是解决方法。非活动状态

请尝试以下方法： -

.disable_a_href{
    pointer-events: none;
}

$('#tab_a a').addClass("disable_a_href");

进一步添加

 $('#tab_a a').attr("href","javascript:void(0)")

您可以查看here

吗？

Answer 3

您可以尝试使用此代码来简化代码

<script type="text/javascript">

   $('#tab_a').on('click', function() {
     return false;
   });
</script>

然后你也可以把一些css改成光标变为禁用

<ul class="nav nav-tabs">
    <li id="tab_a" class="active"><a data-toggle="tab" href="#ABC" style="cursor: not-allowed;"><strong>ABC</strong></a></li>
    <li><a data-toggle="tab" href="#PQR">PQR</a></li>
    <li><a data-toggle="tab" href="#XYZ">XYZ</a></li>
</ul>

希望它会有所帮助...

Answer 4

首先，我假设你像我一样使用Bootstrap 3。

我看到这样的问题的答案说，可以简单地从false事件返回click来禁用标签。但是，似乎此解决方案取决于事件附加的顺序。如果在您的＆＃34;取消之前触发了Bootstrap事件＆＃34;事件，它不会工作。这就是我正在开发的应用程序的情况。

实际上对我有用的是使用Bootstrap tab events。

这是使用show.bs.tab事件代码的外观：

$('#tab_a a').on('show.bs.tab', function () {
    return false;
});

如果需要，您可以在函数内添加额外的逻辑。

nav nav-tabs禁用使用jquery无效的选项卡

4 个答案: