57

我正在使用 Bootstrapnav-bar作为向导进度指示器。我想确保尚未访问的向导步骤不可点击。我希望它们出现在 中nav-bar，但让它们变灰并禁用链接。

这可以在 Bootstrap 中完成nav-bar吗？

4

8 回答 8

80

您可以将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;
   });
});

另一种方法是临时href用锚 ( ) 替换属性。#

于 2013-03-26T23:36:50.493 回答
27

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

虽然这是一种鲜为人知的技术，但它是完全有效的 HTML，并导致元素具有归因于<a>标签的所有样式，但没有链接功能。

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

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

如果 a 元素没有 href 属性，则该元素代表一个占位符，用于放置链接，如果它是相关的，则仅包含元素的内容。

于 2014-12-05T17:27:04.773 回答
4

这可以通过pointer-events属性在 CSS 中完全完成（除非您需要支持 ie <11）。但是，通过关闭指针事件，a我也不再获得不允许的光标，因此我将其设置为 disabled li。（我知道这个问题很老但仍然是第一个搜索结果）

这是我的 SCSS 用于此目的：

ul.nav {
    li.disabled {
        cursor: not-allowed;

        a {
            pointer-events: none;
        }
    }
}
于 2017-09-18T12:08:34.697 回答
3

我想补充一点，仅添加禁用不会阻止导航。此外，答案 jquery 解决方案将起作用，但是如果您添加或删除禁用的类，它不会取消绑定处理程序。

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

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

这会将处理程序附加到主体（确保用您的容器替换主体）并通过禁用过滤。任何时候单击正文，如果单击的内容已禁用，则会阻止单击。

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

于 2015-02-04T20:31:13.360 回答
2

最简单的方法就是将类从 更改nav-link为nav-link disabled。

像这样：

<a class="nav-link disabled" href="#">
于 2021-03-30T23:00:48.653 回答
1

为了禁用导航链接，您需要禁用 li 和 a 标签。但这在使用剃刀语法时可能会有点棘手。将禁用的类添加到 li 工作正常，但它不会禁用 a 标签上的操作。因此，类似于 gustavohenke 解决方案，但有点精致，请在您的文档就绪功能中尝试此操作。

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

于 2017-05-01T13:28:42.800 回答
0

在 href 中保留您的价值。您可以使用 onclick="return false;" 切换锚标记。使用 bootstrap disabled 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>

于 2015-12-07T01:23:23.650 回答
-1

首先，您应该在 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();
于 2015-12-11T19:18:44.400 回答