如何使Bootstrap导航栏项目无法点击？

Question

在bootstrap网站上的导航栏example中，我想以编程方式将其中一个Navbar项目（让我们说“关于”链接）禁用/不可点击。

我已经尝试过.addClass（＆＃39;禁用＆＃39;）,. removeClass（＆＃39; active＆＃39;），但似乎没有任何效果。

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

Answer 1

如果要单击菜单项而不执行任何操作，可以使用以下jQuery语法禁用其效果：

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

然后你可以使用＆＃34;禁用＆＃34;来设置按钮的样式。或者如果你想要灰色，那么用户就知道它是不可点击的。此解决方案与支持jQuery的所有浏览器兼容。

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

Answer 2

只需添加类.disabled

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

然后在你的javascript中

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

here you can see an example

当然，您可以将禁用类添加到jQuery addClass method的项目中

Answer 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。