Jak wyłączyć link używając tylko CSS?


844

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


42
po wielu googlingach mam idealną odpowiedź na to pytanie css-tricks.com/pointer-events-current-nav
RSK

1
To, czy link powinien zostać użyty, czy nie, ma większą wartość semantyczną niż prezentacyjną. Nie należy go wyłączać za pomocą CSS, ale poprzez użycie hiddenatrybutu, który ma zastosowanie do dowolnego elementu HTML. CSS można następnie użyć do wybrania np. a[hidden]Zakotwiczenia i odpowiedniego stylu.
amn

@amn, ale nie sądzę, aby przeglądarki wyświetlały element z ukrytym atrybutem, więc stylizacja stanie się dyskusyjna.
user1794469

1
@ user1794469 Zrobią to, jeśli poinstruujesz ich, używając CSS, używając display: blockna przykład innej wartości display. Ale hiddennie zawsze ma to zastosowanie - dotyczy elementów, które są nieistotne , a pytanie nie jest jasne, dlaczego łącze powinno zostać wyłączone. Jest to prawdopodobnie przypadek problemu XY.
am

Odpowiedzi:


1347

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.


36
Ponadto nie pozwala to uniknąć tabulacji do linku, a następnie Enter.
Jono,

4
Jeśli chcesz go trochę stylizować, aby użytkownik zobaczył, że jest wyłączony. Daj mu trochę krycia: .2
DNRN

4
Działa to teraz we wszystkich nowoczesnych przeglądarkach, w tym IE 11. Jeśli potrzebujesz wsparcia dla IE 10 i niższych, możesz użyć polifillu JavaScript takiego jak ten .
Keavon

26
Ważna uwaga: Wyłącza to tylko klikanie, a nie sam link. Nadal możesz użyć tab + enter, aby „kliknąć” link.
Pikamander2

11
Użycie pointer-events: none;nie jest idealne. Wyłącza również inne zdarzenia, takie jak najechanie kursorem, które jest wymagane do wyświetlania title="…"lub podpowiedzi. Odkryłem, że rozwiązanie JS jest lepsze (za pomocą event.preventDefault();) wraz z niektórymi CSS ( cursor: default; opacity: 0.4;) i etykietą wyjaśniającą, dlaczego łącze jest wyłączone.
Quinn Comendant

140

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


Może być konieczne ustawienie wyświetlania na blok wbudowany (lub coś innego niż wbudowany).
dev_masta

ładna, ale uwaga obsługa przeglądarki wskaźników-zdarzeń (tj. <IE11): caniuse.com/#search=pointer-events
a darren

1
Aby uzyskać styl, spróbuj zmienić pointer-events:none;na pointer-events:unset;. Następnie kursor można zmienić na cursor:not-allowed;. To daje lepszą wskazówkę, co dzieje się z użytkownikiem. Na dzień dzisiejszy wydaje się działać w FF, Edge, Chrome, Opera i Brave.
Sablefoste,

@Sablefoste To nie działa dla mnie w Chrome 60. Kursor jest rzeczywiście not-allowed, ale link można kliknąć.
soupdog

122

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

21
Nie zapomnij zapobiegania domyślnych zachowań: function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;.
ldiqual

5
@Idiqual, return falserobi to
nickf

1
return falsedziała tylko wtedy, gdy akcja jest ustawiona za pomocą hrefatrybutu
Justin

Ta wersja może być również używana do wyłączania kliknięć przy jednoczesnym zachowaniu innych zdarzeń wskaźnika, takich jak: hover lub: focus! Najlepsza odpowiedź!
Charlie Tupman

Chociaż działa to we wszystkich przeglądarkach, wyłącza jedynie klikanie łącza. Pamiętaj, że wielu użytkowników używa się do otwierania łączy z menu kontekstowego lub za pomocą środkowego przycisku myszy.
Alexandru Severin

33

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

30
To nie jest poprawna odpowiedź - zdarzenia-wskaźniki: brak; css może to wyłączyć.
pie6k

Nie myślałem o tym! A może atrybut nie istniał jeszcze w 2010 roku? W każdym razie to prawda, że pointer-events: nonemoże wyłączyć zdarzenia myszy. Nie powoduje to jednak wyłączenia podstawowego łącza. W teście, który wypróbowałem w Chrome 81, nadal mogę aktywować taki link, przechodząc do niego i wciskając klawisz powrotu.
Kevin Conner

31

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

19

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

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>


2
@nickf prawda, jednak jest to fajne rozwiązanie i jest lepsze niż poleganie na złym domyślnym stylu IE, gdy jest wyłączone.
SausageFingers

Myślę, że może to być nieco bardziej skomplikowane. Oto rozwiązanie snook.ca/archives/javascript/clear_links_to_1
Mike Gifford

12

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

3
Myślę, że a[disabled]:active { pointer-events: none !important; }jest lepiej.
Masamoto Miyata


10

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://stackoverflow.com//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.


Jak wyłączyć link za pomocą wyłącznika wyboru? np. <a class="test" disabled href="3"> test </a> a: wyłączony {kursor: niedozwolony; }
ecasper

10

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.


8

Spróbuj tego:

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

6

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>


4

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.


3
Nie potrzebujesz do tego jQuery, możesz ustawić to sam w CSS.
Bram Vanroy 15.04.16

3

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>


2

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

Cześć !!, odpowiedź dotyczy CSSnie JSlub czegoś innego!
Mehdi Dehghani

1

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


To prawda, ale nie do nawigacji za pomocą klawiatury.
AndFisher,

1

Demo tutaj
Wypróbuj ten

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

1
Twoje skrzypce nie działa! Link jest nadal aktywny w Chrome.
Matt Byrne

Aby naprawić ten kod, zamień dwa pierwsze parametry przekazane do on (): $ ('html'). On ('click', 'a.Link', function (event) {event.preventDefault ();});
2C-B

1
Cześć !!, odpowiedź dotyczy CSSnie JSlub czegoś innego!
Mehdi Dehghani

0

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

-1

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.


-1

pointer-events:none wyłączy link:

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

1
To dobrze, ale oczywiście nie działa, jeśli użytkownicy używają jego klawiatury :(
gztomas

-1

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>


2
Tag <a> nie ma wyłączonego atrybutu.
Heksodus
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.