Czy jest jakiś sposób, aby wyłączyć link za pomocą CSS?

Mam wywołaną klasę current-pagei chcę, aby linki z tą klasą były wyłączone, aby po kliknięciu nie było żadnych działań.

Odpowiedź znajduje się już w komentarzach do pytania. Aby uzyskać lepszą widoczność, kopiuję to rozwiązanie tutaj:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

Aby uzyskać pomoc dotyczącą przeglądarki, zobacz https://caniuse.com/#feat=pointer-events . Jeśli potrzebujesz obsługi IE, istnieje obejście tego problemu; zobacz tę odpowiedź .

Ostrzeżenie: użycie pointer-eventsw CSS elementów innych niż SVG jest eksperymentalne. Ta funkcja była częścią specyfikacji roboczej interfejsu CSS3, ale z powodu wielu otwartych problemów została przełożona na CSS4.

CSS może być używany tylko do zmiany stylu czegoś. Najlepszym rozwiązaniem, które możesz zrobić z czystym CSS, jest całkowite ukrycie linku.

To, czego naprawdę potrzebujesz, to JavaScript. Oto, jak robisz, co chcesz, korzystając z biblioteki jQuery.

$('a.current-page').click(function() { return false; });

CSS nie może tego zrobić. CSS służy wyłącznie do prezentacji. Twoje opcje to:

• Nie dołączaj hrefatrybutu do <a>tagów.
• Użyj JavaScript, aby znaleźć elementy kotwiczące classi odpowiednio usunąć ich hreflub onclickatrybuty. jQuery ci w tym pomoże (NickF pokazał, jak zrobić coś podobnego, ale lepszego).

Łącze wyłączone Bootstrap

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Disabled Button, ale wygląda jak link

<button type="button" class="btn btn-link">Link</button>

Możesz ustawić hrefatrybut najavascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

Użyłem:

.current-page a:hover {
pointer-events: none !important;
}

I nie wystarczyło; w niektórych przeglądarkach nadal migał link.

Musiałem dodać:

.current-page a {
cursor: text !important;
}

Jeśli chcesz trzymać się tylko HTML / CSS w formularzu, inną opcją jest użycie przycisku. Nadaj mu styl i ustaw disabledatrybut.

Np. Http://jsfiddle.net/cFTxH/1/

Jeśli chcesz, aby był to tylko CSS, logika wyłączająca powinna być zdefiniowana przez CSS.

Aby przenieść logikę w definicjach CSS, musisz użyć selektorów atrybutów. Oto kilka przykładów:

Wyłącz link, który ma dokładny href: =

Możesz wyłączyć łącza zawierające określoną wartość href, taką jak:

<a href="//website.com/exact/path">Exact path</a>

[href="https://website.com/exact/path"]{
  pointer-events: none;
}

Wyłącz link zawierający fragment ścieżki: *=

Tutaj wszelkie linki zawierające /keyword/w ścieżce zostaną wyłączone

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Wyłącz link zaczynający się od: ^=

[attribute^=value]cel atrybutem, który zaczyna się od wartości konkretnego operatora. Pozwala odrzucić strony internetowe i ścieżki root.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

Możesz nawet użyć go do wyłączenia linków innych niż https. Na przykład :

a:not([href^="https://"]){
  pointer-events: none;
}

Wyłącz link, który kończy się na: $=

[attribute$=value]Operatorowi kierowanie atrybutu, który kończy się specyficzną wartość. Przydatne może być odrzucenie rozszerzeń plików.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Lub jakikolwiek inny atrybut

Css może kierować na dowolny atrybut HTML. Może być rel, target, data-customi tak dalej ...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Łączenie selektorów atrybutów

Możesz połączyć wiele reguł. Powiedzmy, że chcesz wyłączyć wszystkie linki zewnętrzne, ale nie te, które prowadzą do Twojej witryny:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Lub wyłącz linki do plików pdf określonej witryny:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Obsługa przeglądarki

Selektory atrybutów są obsługiwane od IE7. :not()selektor od IE9.

Jednym ze sposobów, w jaki możesz to zrobić za pomocą CSS, byłoby ustawienie CSS na opakowaniu div, które ustawiłeś tak, aby znikało i dzieje się coś innego.

Na przykład:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

Z CSS jak

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Aby faktycznie wyłączyć a, musisz zastąpić zdarzenie kliknięcia lub href, jak to opisali inni.

PS: Aby wyjaśnić, uważam to za dość nieporządne rozwiązanie, a dla SEO też nie jest najlepsze, ale uważam, że jest najlepsze z czysto CSS.

Spróbuj tego:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

Właściwość pointer-events pozwala kontrolować, w jaki sposób elementy HTML reagują na zdarzenia myszy / dotyku - w tym najechanie kursorem / aktywne stany CSS, zdarzenia kliknięcia / dotknięcia w JavaScript oraz czy kursor jest widoczny.

To nie jedyny sposób na wyłączenie linku , ale dobry sposób CSS, który działa w IE10 + i wszystkich nowych przeglądarkach:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

Szukałem przez Internet i nie znalazłem nic lepszego niż to . Zasadniczo, aby wyłączyć funkcję kliknięcia przycisku, po prostu dodaj styl CSS za pomocą jQuery:

$("#myLink").css({ 'pointer-events': 'none' });

Następnie, aby włączyć to ponownie, zrób to

$("#myLink").css({ 'pointer-events': '' });

Sprawdzone na Firefox i IE 11, działało.

możesz użyć tego css:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

Dzięki wszystkim, którzy opublikowali rozwiązania, połączyłem wiele metod, aby zapewnić bardziej zaawansowane disabledfunkcje. Oto sedno , a kod znajduje się poniżej.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

Oto klasa coffescript:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Możesz także zmienić rozmiar innego elementu, tak aby obejmował on linki (używając prawego indeksu Z): To „zje” kliknięcia.

(Odkryliśmy to przez przypadek, ponieważ mieliśmy problem z nagle nieaktywnymi linkami z powodu „responsywnego” projektu powodującego, że H2 zakrył je, gdy okno przeglądarki miało rozmiar mobilny).

Demo tutaj
Wypróbuj ten

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

Kolejną sztuczką jest umieszczenie nad nim niewidzialnego elementu. Spowoduje to również wyłączenie wszelkich efektów aktywowania

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

Można to zrobić w CSS

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Patrz w:

Pamiętaj, że text-decoration: none;i color: black;nie jest potrzebne, ale sprawia, że ​​link wygląda bardziej jak zwykły tekst.

pointer-events:none wyłączy link:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>