Question

我正在使用bootstrap导航栏来显示向导进度指示器。我想确保尚未访问的向导步骤不可点击。我希望它们出现在导航栏中，但让它们变灰并禁用链接。这可以在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;
   });
});

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

Answer 2

执行此操作的正确方法是使用不带<a>属性的href nchor标记。

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

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

有关技术背景，请参阅W3C's HTML specification：

如果a元素没有href属性，则该元素表示a 占位符，否则链接可能放在哪里是相关的，仅包含元素的内容。

Answer 3

这可以在CSS中完成（除非您需要支持ie＆lt; 11）pointer-events属性。但是，通过关闭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

保留href中的值。你可以使用onclick =＆＃34; return false;＆＃34;切换锚标记。使用bootstrap disabled css类使菜单项变灰。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

首先，您应该在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 7

要禁用导航链接，您需要同时禁用li和标签。但是在使用razor语法时，这可能有点棘手。将禁用的类添加到li工作正常，但它不会禁用对标记的操作。所以，类似于gustavohenke解决方案，但有点精炼尝试在您的文档就绪功能。

＆＃13;

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

＆＃13;

Answer 8

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

像这样：

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

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

8 个答案: