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

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.

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.

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>

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

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

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

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>

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

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.

Odpowiedź to:

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

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.

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