para - ¿Es posible hacer que una etiqueta de anclaje de HTML no se pueda hacer clic/enlazar mediante CSS?

insertar audio mp3 en html

Question

Por ejemplo, si tengo esto:

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

¿Hay algo que pueda usar para el atributo de estilo que lo haga para que no se pueda hacer clic en el enlace y no me lleve a page.html?

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

Editar: Quiero indicar por qué quiero hacer esto para que la gente pueda brindar mejores consejos. Estoy intentando configurar mi aplicación para que el desarrollador pueda elegir el tipo de estilo de navegación que desea.

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

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

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

y luego permita que el desarrollador controle el estilo de enlace a través de css.

Answer 1

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

Podría usar algo de JavaScript.

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

Answer 2

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 de JavaScript en su anclaje y devolverlo como falso, este es probablemente el código más corto puedes usar para eso:

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

Answer 3

La respuesta es:

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

Answer 4

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>

Answer 5

Puedes usar este CSS:

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

Y luego asigne la clase a su código html:

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

Hace que el enlace no sea clickeable y que el cursor tenga una flecha, no una mano como los enlaces.

o usa este estilo en el html:

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

pero sugiero el primer acercamiento.

Answer 6

Sí ... Es posible usar css

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

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

Answer 7

Se puede hacer en CSS y es muy simple. cambie la "a" por la "p". Su "enlace de página" no conduce a ningún lugar de todos modos si desea que no se pueda hacer clic.

Cuando le dices a tu CSS que realice una acción de desplazamiento sobre esta "p" específica, cuéntale esto:

(para este ejemplo, le he dado a la "p" la identificación del "ejemplo")

#example
{
  cursor:default;
}

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

Answer 8

Una manera más no molesta (suponiendo que uses 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 decide que este enlace haría otra cosa, no tiene que meterse con el marcado, solo el JS.

Answer 9

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