¿Es posible hacer que una etiqueta de anclaje HTML no sea clickable/enlazable usando CSS?

Por ejemplo si tengo esto:

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

¿Hay algo que pueda usar para el atributo style que haga que el enlace no sea clicable y no me lleve a la página?HTML.

¿O es mi única opción simplemente no envolver 'enlace de página' en una etiqueta de anclaje?

Edit: Quiero indicar por qué quiero hacer esto para que la gente pueda proporcionar mejores consejos. Estoy tratando de configurar mi aplicación para que el desarrollador pueda elegir qué tipo de estilo de navegación quieren.

Así que tengo una lista de enlaces y uno siempre está seleccionado actualmente y todos los demás no. Para los enlaces que no están seleccionados, obviamente quiero que sean etiquetas de anclaje normales en las que se puede hacer clic. Pero para el enlace seleccionado, algunas personas prefieren que el enlace siga siendo clickable, mientras que a otros les gusta que no sea clickable.

Ahora podría fácilmente simplemente programáticamente no envolver etiquetas de anclaje alrededor del enlace seleccionado. Pero me imagino que será más elegante si siempre puedo envolver el seleccionado enlace en algo como:

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

Y luego deje que el desarrollador controle el estilo de enlace a través de css.

 103
csshtml
Author: Ryan, 2011-07-18
Source

9 answers

Puedes usar este css: 

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

Y luego asigna la clase a tu código html: 

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

Hace Que el enlace no clickeable y el cursor estilo de una flecha, no una mano como los enlaces que tenemos.

O usa este estilo en el html: 

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

Pero sugiero el primer enfoque.

 204
Author: Diego Unanue,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-05 16:52:47

Eso no es demasiado fácil de hacer con CSS, ya que no es un lenguaje de comportamiento (es decir, JavaScript), la única manera fácil sería usar un evento OnClick JavaScript en su ancla y devolverlo como falso, este es probablemente el código más corto que podría usar para eso: 

<a href="page.html" onclick="return false">page link</a>
 48
Author: Karan K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-28 01:28:22

Sí.. es posible con css

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

.disable-me {
    pointer-events: none;
}
 9
Author: pown,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-11 10:15:38

O puramente HTML y CSS sin eventos: 

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>
 8
Author: Paulpro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-18 00:48:27

CSS fue diseñado para afectar la presentación, no el comportamiento.

Podrías usar algo de JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};
 5
Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-18 00:27:08

Una forma más no molesta (suponiendo que use jQuery):

HTML:

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

Javascript: 

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

La ventaja de esto es la separación limpia entre lógica y presentación. Si un día decides que este enlace haría algo más, no tienes que meterte con el marcado, solo con el JS.

 4
Author: pixelfreak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-18 00:27:13

La respuesta es: 

<a href="page.html" onclick="return false">page link</a>
 2
Author: Doa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-18 00:25:37 
<a href="page.html" onclick="return false" style="cursor:default;">page link</a>
 0
Author: John,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-24 13:02:24

Se puede hacer en css y es muy simple. cambia la " a "por una"p". Su "enlace de página" no conduce a algún lugar de todos modos si desea que sea unclickable.

Cuando le digas a tu css que haga una acción de hover en esta "p" específica, dile esto:

(para este ejemplo le he dado a la "p" el ID "ejemplo") 

#example
{
  cursor:default;
}

Ahora el cursor permanecerá igual que en toda la página.

 0
Author: Hollnder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-09 23:16:59