如何使 .nav-link 无效？

Question

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

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

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;
   });
});

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

Answer 2

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

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

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

技术背景见W3C's HTML specification：

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

Answer 3

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

这是我的 SCSS：

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

        a {
            pointer-events: none;
        }
    }
}

Answer 4

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

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

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

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

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

Answer 5

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

像这样：

<a class="nav-link disabled" href="#">

Answer 6

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

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

Answer 7

在 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>

Answer 8

首先，你应该在 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();