Jak uczynić link do uruchomienia bootstrap nieaktywnym

Question

Używam paska nawigacji bootstrap dla wskaźnika postępu kreatora. Chcę się upewnić, że kroki kreatora, które nie zostały jeszcze odwiedzone, nie są klikalne. Chciałbym, aby pojawiły się na pasku nawigacji, ale niech będą wyszarzone, a linki wyłączone. Czy można to zrobić na pasku nawigacji bootstrap?

Answer 1

Możesz dodać klasę disabled do pojemnika <li>:

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

Jednak, aby uniemożliwić użytkownikom klikając je, należy użyć JavaScript, aby temu zapobiec:

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

Innym sposobem jest zastąpienie href tymczasowo z kotwicą (#).

Answer 2

Właściwym sposobem jest użycie znacznika nchor <a> bez atrybutu href.

Choć jest to mało znana technika, jest to całkowicie poprawny HTML i prowadzi do elementu ze wszystkimi stylami przypisanymi do znacznika <a>, ale bez funkcji łączenia.

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

Zobacz W3C's HTML specification na tle techniczne:

Jeśli element ma atrybut href, a następnie element reprezentuje zastępczy gdzie link mogłyby zostały umieszczone, jeśli było istotne, składające się tylko z zawartości elementu.

Answer 3

Chciałbym dodać, że samo dodanie wyłączone nie zapobiegnie nawigacji. Ponadto rozwiązanie jquery odpowiedzi będzie działało, jednak jeśli dodasz lub usuniesz wyłączoną klasę, to nie odłączysz obsługi.

Można to rozwiązać, zmieniając procedurę obsługi zdarzeń, aby korzystać z metody jonowej .on.

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

Umożliwia to umieszczenie nośnika w korpusie (upewnij się, że zamieniłeś korpus na pojemnik) i filtr został wyłączony. Kliknięcie w dowolnej chwili, jeśli to, co zostało kliknięte, uniemożliwi kliknięcie.

Aby uzyskać więcej informacji, sprawdź numer http://api.jquery.com/on/.

Answer 4

Aby zachować swoją wartość w href. Możesz użyć onclick = "return false;" aby przełączyć znacznik zakotwiczenia. Użyj opcji bootstrap disabled css class, aby wyszarzyć element menu.

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

Po pierwsze, należy dodać identyfikator do ul:

<ul class="nav navbar-nav navbar-right" id="someId"> 
      <li><a>Element</a></li> 
</ul> 

można ukryć ul, przez przykład:

$(document).find('ul#someId').hide(); 

i kiedy życzenie, możesz pokazać ul:

$(document).find('ul#someId').show(); 

Answer 6

Aby wyłączyć łącze nav, należy wyłączyć zarówno li, jak i tagi. Ale może to okazać się nieco trudne, gdy używamy składarki brzytwy. Dodanie wyłączonej klasy do li działa dobrze, ale nie wyłącza akcji na tagu. Tak więc, podobnie jak w przypadku rozwiązania gustavohenke, ale nieco udoskonalone, spróbuj tego w funkcji gotowego dokumentu.

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

Answer 7

Można to zrobić całkowicie w CSS (chyba że trzeba wspierać tj < 11) z właściwością pointer-events. Jednak przez wyłączenie zdarzeń wskaźnika dla a również nie otrzymuję niedozwolonego kursora, więc ustawiłem go na wyłączony li. (wiem, że to pytanie jest dość stary, ale nadal jest pierwszy wynik wyszukiwania)

To mój SCSS do tego celu:

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

     a { 
      pointer-events: none; 
     } 
    } 
}