relaciona - javascript ejemplos

¿Cómo hago un enlace ininteligible?

Question

¿Hay alguna propiedad de CSS o algo que pueda usar con mi etiqueta de ancla para que no pueda hacer clic o TENGO que hacer cosas en código detrás para obtener lo que quiero?

[edit] onclick=return false; está actualizando la página ... No quiero que ... quiero que esta etiqueta de anclaje aparezca como texto sin formato ... en realidad, he aplicado css en la etiqueta de anclaje ... así que no puedo cambiarlo a una etiqueta simple o lo que sea

Answer 1

Aquí está la solución HTML / CSS pura:

1. elimine la etiqueta " href " y ponga su ancla en el nombre "attr" (probablemente ya lo sabía)

2. Agrega el siguiente estilo a tu enlace:

   a{ text-decoration: none; cursor: default; }

Debería apuntar a los estilos de anclaje utilizando atributos con nombre, para que todos sus enlaces no se vuelvan "ininteligibles", de esta manera:

a[name=*]{ text-decoration: none; cursor: default; }

Los attrs con nombre no funcionan en IE 6 (probablemente tampoco en 7). Una solución completamente de navegador cruzado es agregar una clase a los anclajes y apuntar a eso. Ex:

a.anchor{ text-decoration: none; cursor: default; }

Nota: El estilo anterior hace que los enlaces "aparezcan" no se pueden hacer clic. Si una de las etiquetas tuviera un href, aún podría hacer clic en él y "iría a alguna parte" o "haría algo".

Espero que esto ayude.

Answer 2

Coloque un estilo de bloque = "posición: absoluta" justo antes de la etiqueta de anclaje y téngalo al tamaño para superponer el contenido. No está seguro de por qué desea que no se pueda hacer clic en la mayoría de las personas se está preguntando cómo hacer que se pueda hacer clic en los enlaces en un html en http://wsmithdesign.wordpress.com/2010/10/20/layering-html-with-absolute-positions-in-fluid-html/

Answer 3

Esto bonito funciona para mí. Agregue una clase de desactivación a su etiqueta. y este fragmento de código a tu css

a.disable {
pointer-events: none;
cursor: default;
}

Answer 4

Puedes usar

disabled="disabled"

creo que en la etiqueta de anclaje, eso es lo que hago en csharpindepth.com, de todos modos. No me gustaría jurar hasta qué punto es ampliamente admitido, es probable que desee verificarlo. Aunque parece estar bien en Chrome, IE y Firefox. No sé si hay un equivalente solo en CSS.

Tenga en cuenta que creo que esto hará que el enlace sea visiblemente ininteligible (sin embargo, el navegador desea hacerlo) en lugar de no hacer nada.

EDIT: Acabo de probar esto en un archivo local, y no funciona ... mientras que definitivamente funciona en csharpindepth.com. Vale la pena intentarlo, pero también es probable que merezca la pena ver otros enfoques

EDITAR: Como señala BoltClock, este no es un HTML estrictamente válido, lo que puede significar que solo funcionará en modo peculiar, por ejemplo. (Eso podría explicar mi falta de producción local).

Probablemente estés mejor con una solución de JavaScript junto con un estilo CSS para cambiar la apariencia del enlace ... pero dejaré esta respuesta aquí solo para el registro.

Answer 5

Si desea agregar un ancla, use este código html
Use este código html antes de colocar el ancla.
<a id="Write Your Anchor Here" class="invisible"></a>
es decir
<a id="anchor" class="invisible"></a> How to Put Anchor
o

<div id="youranchorname" class="anchor">

https://www.example.com/2016/11/how-to-add-html-code#anchor

Al usar esta URL, el visitante accederá directamente a la forma de poner la parte del ancla en la publicación. Gracias

Nota: esta url solo se usa para propósitos de ejemplo. No es una URL en funcionamiento y su etiqueta div debe estar cerrada con </div>

Answer 6

Si desea que la etiqueta de anclaje sea un destino de enlace, pero no una fuente de enlace, omita el atributo href y solo tenga un atributo de nombre. La especificación HTML 4.01 lo permite y sugiere que los navegadores muestren el texto dentro de la etiqueta de anclaje href-less como texto normal.

Answer 7

Si el elemento delimitador es un elemento del lado del servidor, elimine el atributo href. anchor.attributes.remove ("href");

Answer 8

Si quieres usar CSS:

.x{
  pointer-events: none;
 }

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.google.com" class="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" class="" />Clickable Google Link</a>
</body>
</html>

Answer 9

Solo una actualización que en los navegadores modernos puedes hacer:

a.disable {
  pointer-events: none;
  cursor: default;
}

<a href="http://.com" class="disable">SO</a>

Answer 10

incluir un atributo onclick="return false" en el elemento delimitador hace el truco. Si bien esta solución usa javascript y no css

Answer 11

<a href="abcd.html" onclick="return false;">abcd</a>