Czy można uniemożliwić klikanie / łączenie znacznika HTML kotwicy za pomocą CSS?


134

Na przykład, jeśli mam to:

<a style="" href="page.html">page link</a>

Czy jest coś, czego mogę użyć jako atrybutu stylu, co sprawi, że link nie będzie klikalny i nie przeniesie mnie do page.html?

A może moja jedyna opcja to po prostu nie zawijać „linku do strony” w tagu kotwicy?

Edycja: Chcę wyjaśnić, dlaczego chcę to zrobić, aby ludzie mogli udzielać lepszych porad. Próbuję skonfigurować moją aplikację tak, aby deweloper mógł wybrać typ stylu nawigacji, jaki chce.

Mam więc listę linków, z których jedno jest zawsze wybrane, a inne nie. W przypadku linków, które nie są zaznaczone, oczywiście chcę, aby były to zwykłe znaczniki kotwicy z możliwością klikania. Jednak w przypadku wybranego linku niektórzy wolą, aby link pozostawał klikalny, podczas gdy inni wolą, aby nie był klikalny.

Teraz mogłem po prostu programowo nie zawijać znaczników kotwicy wokół wybranego łącza. Ale wydaje mi się, że będzie bardziej elegancko, jeśli zawsze mogę zawinąć wybrany link w coś takiego:

<a id="current" href="link.html">link</a>

a następnie pozwól programiście kontrolować styl łączenia za pomocą CSS.



3
Jeśli nie chcesz, aby została kliknięta, może użyj <span>zamiast tego?
David mówi, że przywróć Monice

Musiałbym zgodzić się z Davidem. Nie łam paradygmatów interfejsu użytkownika. Oczekiwaniem użytkownika jest możliwość klikania linków. Jeśli nie można go kliknąć, to tak naprawdę nie jest to łącze, prawda?
mrtsherman

Więcej możliwych odpowiedzi znajdziesz na stackoverflow.com/questions/2091168/disable-a-link-using-css .
Oliver

Tak, to okropny pomysł. Czytniki ekranu nadal będą widzieć łącze jako łącze, ponieważ jest to łącze. Wyszukiwarki też. W rzeczywistości wszystko, co rozumie HTML. Nie rób tego. Nie ma w tym nic „eleganckiego”.
Paul D. Waite,

Odpowiedzi:


278

Możesz użyć tego CSS:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

A następnie przypisz klasę do swojego kodu HTML:

<a style="" href="page.html" class="inactiveLink">page link</a>

To sprawia, że ​​link nie jest możliwy do kliknięcia, a styl kursora jest strzałką, a nie ręką, jak w przypadku linków.

lub użyj tego stylu w html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

ale proponuję pierwsze podejście.


Mogę potwierdzić, że to działa w przeglądarce Firefox / Chrome w wersji Ubuntu. Zastanawiam się jednak, czy będzie działać w IE w systemie Windows.
JohnMerlino

3
Kluczem w tym roztworze wynosi: pointer-events. Tutaj link do tabeli zgodności
masegaloeh

@JohnMerlino: nie działa w IE9. Zobacz więcej na linku masegaloeh do tabeli kompatybilności
Howie

Ostrzeżenie: Tabulacja w celu przeniesienia fokusu na łącze i użycie klawisza Enter do aktywacji łącza nadal będzie działać
1919

Nie sądzę, żeby kursor: domyślny jest konieczny. Dopóki masz zdarzenia wskaźnikowe: brak, wydaje się, że działa.
kloddant

54

Nie jest to łatwe do zrobienia z CSS, ponieważ nie jest to język behawioralny (np. JavaScript), jedynym prostym sposobem byłoby użycie zdarzenia JavaScript OnClick na twojej kotwicy i zwrócenie go jako fałszywego, to prawdopodobnie najkrótszy kod możesz użyć do tego:

<a href="page.html" onclick="return false">page link</a>

2
@Mike To sprawia, że ​​kliknięcie nic nie robi, ale przycisk nadal wygląda na klikalny.
acostache

1
@acostache using style = "cursor: default;" powinien pomóc ze wskaźnikiem
John

4
Pytanie brzmiało: „używając CSS”, więc jest to dobra, ale nie poprawna odpowiedź.
Roman Holzner,

Lepiej jest użyć css niż onclick = "return false" z 3 głównych powodów: 1- Za pomocą css możesz zmienić domyślny kursor myszy linku na domyślną strzałkę. 2- To natrętne js. 3 - W rzeczywistości zwraca wartość, nie chcesz zwracać fałszu za każdym razem, gdy klikniesz łącze.
Diego Unanue

11

Tak .. Jest to możliwe za pomocą css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

To najczystszy sposób, ale jedno zastrzeżenie: jest obsługiwany tylko przez IE11 + caniuse.com
pixelfreak

8

Lub czysty HTML i CSS bez zdarzeń:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

1
-1, ponieważ jest to dość skomplikowany / mylący sposób rozwiązania problemu. Nie robi też tego, o co chodzi w pytaniu (wyłącza link). Po prostu zakrywa link niewidocznym elementem. Odpowiedź Diego jest znacznie czystsza.
rozwijanie

@developering Myślę, że odpowiedź Diego również jest lepsza i powinna zostać oceniona wyżej i zaakceptowana. Jednak kiedy pisałem tę odpowiedź (3 lata temu) pointer-eventsprawie nie obsługiwałam przeglądarki.
Paul,

@Paulpro Pomyślałem, że tak jest. Przepraszamy za negatywną opinię! Chcę tylko upewnić się, że najbardziej aktualna odpowiedź jest na górze. Dzięki za odpowiedzi.
rozwijanie

6

CSS został zaprojektowany, aby wpływać na prezentację, a nie na zachowanie.

Możesz użyć JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};

5

Bardziej nienarzucający się sposób (zakładając, że używasz jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

JavaScript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

Zaletą tego jest czyste oddzielenie logiki od prezentacji. Jeśli pewnego dnia zdecydujesz, że ten link zrobi coś innego, nie musisz mieszać ze znacznikami, tylko z JS.


4
Wiesz, że możesz łatwo napisać kod inny niż jQuery, aby zrobić to samo, co działałoby znacznie szybciej: document.getElementById('my-link').onclick = function(){ return false; };
Paul

1
Myślę, że większość ludzi chce (i powinna) używać jakiegoś frameworka, aby ułatwić rozwój. Autor nie określił żadnych ograniczeń wydajności, ale jQuery zminimalizowany i spakowany gzipem ma tylko 31 KB. Myślę, że korzyści znacznie przewyższają koszty.
pixelfreak

2
Poważnie? Jaka przeglądarka nie obsługuje onclick lub getElementById. Okej, więc IE 2 nie obsługuje onclick, ale nie obsługuje również CSS ... i bardzo wątpię, że twój kod jQuery będzie działał w IE 2.
Paul

1
Różnica prędkości może być niewielka, ale nie, jeśli nie możesz pobrać biblioteki jQuery. Naprawdę uważam, że nie jest dobrym pomysłem zachęcanie do korzystania z jQuery, gdy nie jest to potrzebne, ponieważ ludzie stają się od niego zależni i zapominają, jak bez niego pisać Javascript.
Paul

4
@PaulPRO Ta dyskusja jest dyskusyjna bez wymagań autora. Każdy framework ma swój cel. Jeśli nie biegle posługuje się JS, a tylko tworzy stronę internetową typu mom-n-pop i potrzebuje manipulować jakimś elementem DOM, znacznie łatwiej byłoby mu użyć frameworka. Twoja niechęć do używania jakiegokolwiek frameworka jest absurdalna. PHP jest napisane w C. Czy to oznacza, że ​​powinieneś pisać w C i nie używać PHP? iOS ma UIKit, Core Data, Quartz itp. Flash ma mnóstwo powszechnie używanych bibliotek zewnętrznych. Ponownie, każdy framework ma swój cel. Purystyczna, nie wbudowana mentalność nikomu nie pomoże.
pixelfreak

2

Odpowiedź to:

<a href="page.html" onclick="return false">page link</a>

0

Można to zrobić w css i jest to bardzo proste. zmień „a” na „p”. Twój „link do strony” i tak nigdzie nie prowadzi, jeśli chcesz uniemożliwić jego kliknięcie.

Kiedy powiesz swojemu css, aby wykonał akcję najechania na to konkretne „p”, powiedz mu:

(dla tego przykładu dałem „p” identyfikator „przykładu”)

#example
{
  cursor:default;
}

Teraz kursor pozostanie taki sam, jak na całej stronie.


-1
<a href="page.html" onclick="return false" style="cursor:default;">page link</a>

Nie ma potrzeby dodawania osobnej odpowiedzi na to pytanie, wystarczy Twój komentarz do odpowiedzi @KaranK, pomyślał. Unikaj podwójnych odpowiedzi.
MAChitgarha
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.