twitter-bootstrap 如何使引导程序导航链接处于非活动状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15648329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a bootstrap nav link inactive
提问by Krystian Cybulski
I am using a bootstrap nav bar for a wizard progress indicator. I want to make sure that steps of the wizard which have not been visited yet are not clickable. I would like them to appear in the nav bar, but have them be greyed out and the links be disabled. Can this be done in the bootstrap nav bar?
我正在使用引导程序导航栏作为向导进度指示器。我想确保尚未访问的向导步骤不可点击。我希望它们出现在导航栏中，但让它们变灰并禁用链接。这可以在引导程序导航栏中完成吗？
回答by gustavohenke
You can add the disabledclass to the container <li>:
您可以将disabled类添加到容器中<li>：
<ul class="nav nav-list">
<li class="disabled"><a href="index.html">...</a></li>
</ul>
However, to disallow users clicking them, you should use JavaScript to prevent this:
但是，为了禁止用户点击它们，您应该使用 JavaScript 来防止这种情况：
$(document).ready(function() {
$(".nav li.disabled a").click(function() {
return false;
});
});
Another way is replacing the hrefproperty with an anchor (#) temporarily.
另一种方法是暂时href用锚点 ( #)替换该属性。
回答by Jpsy
The right way to do this is using an <a>nchor tag without hrefattribute.
正确的做法是使用<a>没有href属性的nchor 标签。
While this is a hardly known technique it is totally valid HTML and leads to an element with all the styling that is attributed to the <a>tag but with no linking functionality.
虽然这是一种鲜为人知的技术，但它是完全有效的 HTML，并导致元素具有归因于<a>标签的所有样式，但没有链接功能。
<ul class="nav nav-list">
<li><a>...</a></li>
</ul>
See W3C's HTML specificationfor technical background:
有关技术背景，请参阅W3C 的 HTML 规范：
If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.
如果 a 元素没有 href 属性，则该元素表示一个占位符，用于在其他情况下放置链接的位置（如果链接是相关的），则仅由元素的内容组成。
回答by Chris
This can be done completly in CSS (unless you need to support ie <11) with the pointer-eventsproperty.
However, by turning pointer events off for aI also no longer get the not-allowed cursor, so I set it on the disabled li.
(I know this question is quite old but is still the first search result)
这可以在 CSS 中完全完成（除非您需要支持 ie <11）的pointer-events属性。但是，通过关闭指针事件，a我也不再获得不允许的光标，因此我将其设置为 disabled li。（我知道这个问题很老，但仍然是第一个搜索结果）
This is my SCSS for that purpose:
这是我为此目的的 SCSS：
ul.nav {
li.disabled {
cursor: not-allowed;
a {
pointer-events: none;
}
}
}
回答by Chloe
I would like to add that just adding disabled will not prevent navigation. In addition, the answers jquery solution will work, however if you add or remove the disabled class, it will not unbind the handler.
我想补充一点，仅添加禁用不会阻止导航。此外，答案 jquery 解决方案将起作用，但是如果您添加或删除禁用的类，它不会解除绑定处理程序。
This can be solved by changing the event handler to use the .on method of jquery.
这可以通过更改事件处理程序以使用 jquery 的 .on 方法来解决。
$('body').on('click', '.disabled', function(e) {
e.preventDefault();
return false;
});
This attaches a handler to body(make sure to replace body with your container) and filter by disabled. Anytime body is clicked, if what is clicked has disabled, it prevents the click.
这将一个处理程序附加到 body（确保用您的容器替换 body）并通过禁用过滤。任何时候单击 body 时，如果单击的内容已禁用，则会阻止单击。
Check out http://api.jquery.com/on/for more info.
查看http://api.jquery.com/on/了解更多信息。
回答by Yehezkel Yehoshua
In order to disable a nav link you need to disable both the li and a tags. But that may prove a bit tricky when using razor syntax. Adding the disabled class to the li works fine but it doesn't disable the action on the a tag. So, similar to gustavohenke solution but a bit refined try this in your document ready function.
为了禁用导航链接，您需要禁用 li 和 a 标签。但这在使用剃刀语法时可能会有点棘手。将禁用的类添加到 li 工作正常，但它不会禁用 a 标签上的操作。因此，类似于 gustavohenke 解决方案，但有点精致，请在您的文档就绪功能中尝试此操作。
$(".nav li.disabled a").prop("disabled",true)回答by powderllama
To preserve your value in the href. You can use onclick="return false;" to toggle the anchor tag. Use the bootstrap disabled css class to gray out the menu item.
保留您在 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>回答by Luis Cabrera Benito
First, you should add an id to the ul:
首先，您应该向 ul 添加一个 id：
<ul class="nav navbar-nav navbar-right" id="someId">
<li><a>Element</a></li>
</ul>
You can hide the ul, by example:
您可以隐藏ul, 例如：
$(document).find('ul#someId').hide();
and when you wish, you can show the ul:
当你愿意时，你可以显示 ul：
$(document).find('ul#someId').show();
