如何使引导程序导航链接处于非活动状态

我正在使用引导程序导航栏作为向导进度指示器。 我想确保尚未访问过的向导步骤不可点击。 我希望他们出现在导航栏，但让他们灰色和链接被禁用。 这可以在bootstrap导航栏中完成吗？

Answer 1

您可以将disabled类添加到容器<li> ：

 <ul class="nav nav-list"> <li class="disabled"><a href="index.html">...</a></li> </ul> 

但是，要禁止用户点击它们，您应该使用JavaScript来阻止：

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

另一种方法是暂时用锚点（ # ）replacehref属性。

Answer 2

正确的方法是使用不带href属性的<a> nchor标签。

虽然这是一个几乎不为人知的技术，但它完全是有效的HTML，并且导致所有样式被归因于<a>标签但没有链接function的元素。

 <ul class="nav nav-list"> <li><a>...</a></li> </ul> 

有关技术背景，请参阅W3C的HTML规范 ：

如果a元素没有href属性，那么元素表示一个占位符，表示一个链接可能被放置的位置，如果它是相关的，则只包含元素的内容。

Answer 3

我想补充一点，只是添加禁用不会阻止导航。 另外，jQuery解决scheme的解决scheme也可以工作，但是如果你添加或者删除了被禁用的类，它将不会解除绑定处理程序。

这可以通过更改事件处理程序来解决，以使用jQuery的.on方法。

 $('body').on('click', '.disabled', function(e) { e.preventDefault(); return false; }); 

这将处理程序附加到正文（确保将正文replace为您的容器），并通过禁用进行过滤。 任何时候身体被点击，如果点击被禁用，它阻止点击。

查看http://api.jquery.com/on/了解更多信息。;

Answer 4

在href中保留你的价值。 你可以使用onclick =“return false;” 切换锚标记。 使用引导禁用的css类灰色菜单项。

 var enableMyLink = false; if (enableMyLink) { $("li").removeClass("disabled").find("a").removeAttr("onclick"); } else { $("li").addClass("disabled").find("a").attr("onclick", "return false;"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <li> <a href="http://sample.com/">My Link</a> </li> 

Answer 5

首先，你应该给ul添加一个id：

 <ul class="nav navbar-nav navbar-right" id="someId"> <li><a>Element</a></li> </ul> 

你可以隐藏ul ，例如：

 $(document).find('ul#someId').hide(); 

当你想，你可以显示ul：

 $(document).find('ul#someId').show(); 

Answer 6

为了禁用导航链接，您需要禁用li和标签。 但是，使用剃刀语法可能会有点棘手。 将禁用的类添加到li工作正常，但它不会禁用标记上的操作。 所以，类似gustavohenke解决scheme，但有点精致的尝试在您的文档准备function。

 $(".nav li.disabled a").prop("disabled",true) 

Answer 7

这可以在CSS中完成（除非需要使用pointer-events属性来支持ie <11）。 但是，通过closures指针事件，我也不再获得不允许的光标，所以我将它设置在禁用的li 。 （我知道这个问题相当老，但仍是第一个search结果）

这是我的SCSS为此目的：

 ul.nav { li.disabled { cursor: not-allowed; a { pointer-events: none; } } }