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

Question

Я использую навигационную панель bootstrap для индикатора прогресса мастера. Я хочу убедиться, что шаги мастера, которые еще не были посещены, не доступны для кликов. Я бы хотел, чтобы они появлялись в навигационной панели, но чтобы они были серыми и ссылки были отключены. Это можно сделать в панели навигации bootstrap?

Answer 1

Вы можете добавить disabled класс контейнера <li>:

$(document).ready(function() { 
    $(".nav li.disabled a").click(function() { 
    return false; 
    }); 
}); 

Другой способ вытесняет:

<ul class="nav nav-list"> 
    <li class="disabled"><a href="index.html">...</a></li> 
</ul> 

Однако, чтобы запретить пользователям щелкая их, вы должны предотвратить это использовать JavaScript href Недвижимость с якорем (#) временно.

Answer 2

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

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

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

См W3C's HTML specification технического фон:

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

Answer 3

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

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

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

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

Отъезд http://api.jquery.com/on/ для получения дополнительной информации.

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

Answer 5

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

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

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

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

Answer 7

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

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

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

     a { 
      pointer-events: none; 
     } 
    } 
}