如何使 Bootstrap 导航栏项目不可点击？答案

【问题标题】：How to make a Bootstrap navbar item unclickable?如何使 Bootstrap 导航栏项目不可点击？
【发布时间】：2015-09-25 19:24:48
【问题描述】：

在引导站点上的导航栏example 中，我想以编程方式将导航栏项目之一（比如说关于链接）禁用/不可点击。

我尝试了 .addClass('disabled')、.removeClass('active')，但似乎没有任何效果。

我错过了一些简单的东西吗？

【问题讨论】：

【解决方案1】：

如果你想让一个菜单项的点击不做任何事情，你可以使用下面的 jQuery 语法来禁用它的效果：

$(/* jQuery selector for menu item */).click(function(e) {
     e.preventDefault();
});

然后，您可以根据需要将按钮设置为“禁用”或灰色，以便用户知道它是不可点击的。该方案兼容所有支持jQuery的浏览器。

这是此解决方案的 JSFiddle 演示（感谢 cmets 中的@Adjit！）：http://jsfiddle.net/7a2p8jjn/1/

【讨论】：

【解决方案2】：

只需添加类 .disabled

<li class="disabled"><a href="#about">About</a></li>

然后在你的javascript中

$(document).ready(function() {
   $(".nav li.disabled").click(function() { return false; });
});

当然，您也可以使用jQuery addClass method 为项目添加一个类disabled

【讨论】：

【解决方案3】：

您可以添加pointer-events: none 作为元素的样式。 jQuery 示例：

$('.navbar-nav').find('a[href=#about]').css('pointer-events', 'none')

p.s.：正如@maximillian-laumeister 所说，这个解决方案是not compatible with IE10 and earlier。

【讨论】：