Как сделать загрузочную ссылку bootstrap неактивной

Ответ 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 якорем (#).

Ответ 2

Правильный способ сделать это - использовать тег <a> nchor без атрибута href.

Несмотря на то, что это едва ли известная техника, он является полностью допустимым HTML и приводит к элементу со всем стилем, который приписывается тегу <a>, но без функциональности связывания.

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

См. спецификацию HTML W3C для технического фона:

Если элемент a не имеет атрибута href, то элемент представляет собой заполнитель, где ссылка могла бы быть размещена иным образом, если она были релевантными, состоящими только из содержимого элемента.

Ответ 3

Я хотел бы добавить, что просто добавление отключенного не будет препятствовать навигации. Кроме того, решение jquery ответов будет работать, однако если вы добавите или удалите отключенный класс, он не отменит обработчик.

Это можно решить, изменив обработчик события на использование метода .on jquery.

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

Это прикрепляет обработчик к телу (обязательно замените тело контейнером) и отключите фильтр. В любое время щелкнуть по телу, если нажатие кнопки отключено, оно предотвращает щелчок.

За дополнительной информацией обращайтесь http://api.jquery.com/on/.

Ответ 4

Чтобы сохранить значение в href. Вы можете использовать onclick = "return false;" для переключения метки привязки. Используйте класс css, который отключен bootstrap, чтобы отменить пункт меню.

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>

Ответ 5

Во-первых, вы должны добавить id в ul:

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

Ответ 6

Чтобы отключить навигационную ссылку, вам необходимо отключить как li, так и теги. Но при использовании синтаксиса бритвы это может показаться немного сложным. Добавление отключенного класса в li работает отлично, но оно не отключает действие тега a. Итак, аналогично решению gustavohenke, но немного уточните, попробуйте это в своей готовой документации.

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

Ответ 7

Это можно сделать полностью в CSS (если вам не нужно поддерживать ie < 11) с помощью свойства pointer-events. Однако, отключив события указателя для a, я также больше не получаю не разрешенный курсор, поэтому я установил его на отключенном li. (Я знаю, что этот вопрос довольно старый, но по-прежнему является первым результатом поиска)

Это мой SCSS для этой цели:

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

        a {
            pointer-events: none;
        }
    }
}