2009-12-02 19 views
37

? Es posible hacer un enlace que no hace nada. Quiero que el elemento sea un enlace, así que obtengo el cursor para cambiar con el mouseover, pero no quiero que el enlace vaya realmente a ninguna parte, ya que de hecho desencadena la aparición de un div con funcionalidad adicional en la misma página.¿Cómo hago un enlace que no va donde

Respuesta

80

se sumará a la historia del navegador:

<a href="#"></a>

no se sumará a la historia del navegador (método preferido):

<a href="javascript:;"></a>

+10

¿Está bien aunque hayan Javascript desactivado? – pingu

+3

Sí, no hará nada. –

+1

Al igual que una nota, esta última causa problemas si tiene configurada una función onclick. – Shule

1

Una opción sería la de apuntar a # someid: moverá el desplazamiento vertical a ese elemento, pero puede ser o no lo que quieras.

Ps. puedes lograr el mismo resultado con los estilos.

15

En su lugar, se puede utilizar un <span> y establecer el estilo del cursor:

<span id="node42" class="node-link">My Text</span> 

y especificar el cursor en la hoja de estilos:

.node-link { cursor: pointer; } 

Esto también permitirá conectar al nodo de sus acciones más adelante (muestre aquí usando Prototype):

<script type="text/javascript"> 
    $('node42').observe('click', function(event) { 
     alert('my click handler'); 
    }); 
</script> 
+3

¿Por qué id en lugar de clase? –

+0

@Roger: el uso de 'id' permite que el elemento se identifique de manera única, principalmente útil para el ejemplo de javascript en este caso. Tienes un buen punto para el cursor. Es probablemente más un estilo basado en la clase. He actualizado mi respuesta. ¡Gracias! – jheddings

+1

Esto no importará el estilo de los hipervínculos (como colores de hipervínculos, decoración de texto, etc.). Por lo tanto, la respuesta de powers1 es mejor. – Pratyush

2

Si usted jus Si desea estilo, configure el CSS cursor property como puntero.

Pero parece que quiere <a href="javascript:void(do_something())">.

6

Sólo tiene que añadir el estilo cursor:pointer al elemento:

<a id="clickme">Click Me</a> 

CSS:

#clickme { cursor: pointer } 

O (Dios no lo quiera) en línea:

<a style="cursor:pointer">Click Me</a> 
+1

Debe tener que usar href = "#". Click Me creará un problema. –

+0

@Umesh, ¿qué problema? El único "problema" es que los estilos de desplazamiento no funcionarán en IE6 y el 'cursor: puntero' no se aplicará automáticamente. Por favor explique. –

13

en mi opinión, la solución más completa gratuita para hackear:

<a href="" onclick="return false;">do absolutely nothing</a> 
+1

Esta solución parece funcionar mejor para mí, hasta ahora, ya que quiero usar una función de JavaScript en 'onclick' (simplemente devuelvo falso después de ella): p. 'my text' – Shule

1

probar esto "< a href =" javascript:; ">"

1

que estaba buscando algo más simple, y creo que lo he encontrado. ¿Quieres que tu enlace no vaya a ninguna parte? Omita el href.

<a class='irrelevant_for_this_example'>Some text</a>

href="#" se desplazará a la parte superior de la página.

href="javascript:;" parece dudoso.

Una solución JS parece innecesaria para algo tan simple.

+2

En realidad, creo que el OP probablemente estaba usando el enlace para activar un cuadro desplegable/expandible en JavaScript. Puedo confirmar que 'href =" javascript:; "' funciona para eso. Eliminar el 'href' significa que el navegador no lo trata como un enlace normal, es decir, el mouse no cambia a un dedo cuando pasa el mouse sobre el enlace. – binaryfunt

+0

Habiendo dicho eso, 'href =" # void "', o algo así, funciona, y puede ser mejor – binaryfunt

1

Éstos son 2 Javascript clásico enfoques que no le dará un error en sus JS-consola y/o no cambian la URL ni guardarla en el historial del navegador:

<a href="javascript:void(0);">Click on this javaScript error-free link that won't change your URL nor save it into your browser history</a><hr /> 
 
<a href="#void">Maybe a more readable approach, but unfortunately this one changes your URL</a>

Cuestiones relacionadas