È possibile rendere un tag di ancoraggio HTML non selezionabile / collegabile tramite CSS?

Ad esempio se ho questo:

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

C'è qualcosa che posso usare per l'attributo style che lo renderà così il link non è cliccabile e non mi porterà a page.html?

Oppure, è la mia unica opzione per non semplicemente racchiudere il "collegamento di pagina" in un tag di ancoraggio?

Modifica: voglio dire perché voglio farlo in modo che le persone possano essere in grado di fornire consigli migliori. Sto cercando di configurare la mia applicazione in modo che lo sviluppatore possa scegliere il tipo di stile di navigazione che desidera.

Quindi, ho un elenco di collegamenti e uno è sempre selezionato e tutti gli altri no. Per i collegamenti che non sono selezionati, ovviamente voglio che siano normali tag di ancoraggio cliccabili. Ma per il collegamento selezionato, alcune persone preferiscono che il collegamento rimanga cliccabile mentre ad altri piace renderlo non selezionabile.

Ora potrei facilmente non programmare a livello di codice un tag di ancoraggio attorno al collegamento selezionato. Ma immagino che sarà più elegante se posso sempre avvolgere il collegamento selezionato in qualcosa del tipo:

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

e quindi lascia che lo sviluppatore controlli lo stile di collegamento tramite CSS.

Puoi usare questo css:

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

E quindi assegna la classe al tuo codice html:

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

Rende il collegamento non selezionabile e lo stile del cursore una freccia, non una mano come i collegamenti.

o usa questo stile nell'html:

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

ma suggerisco il primo approccio.

Questo non è troppo facile da fare con i CSS, poiché non è un linguaggio comportamentale (cioè JavaScript), l'unico modo semplice sarebbe usare un evento JavaScript OnClick sulla tua ancora e restituirlo come falso, questo è probabilmente il codice più breve potresti usare per quello:

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

Sì. È possibile utilizzare CSS

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

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

O puramente HTML e CSS senza eventi:

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

Il CSS è stato progettato per influenzare la presentazione, non il comportamento.

Puoi usare un po 'di JavaScript.

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

Un modo più non invadente (supponendo che tu usi jQuery):

HTML:

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

Javascript:

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

Il vantaggio di questo è la netta separazione tra logica e presentazione. Se un giorno decidi che questo link farebbe qualcos'altro, non devi fare confusione con il markup, solo JS.

La risposta è:

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

Può essere fatto in CSS ed è molto semplice. cambia la "a" in una "p". Il tuo "link alla pagina" non conduce comunque da qualche parte se vuoi renderlo non cliccabile.

Quando dici al tuo css di fare un'azione al passaggio del mouse su questa specifica "p" digli questo:

(per questo esempio ho dato alla "p" l'ID "esempio")

#example
{
  cursor:default;
}

Ora il tuo cursore rimarrà lo stesso di tutta la pagina.

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