¿Cómo puedo crear un vacío de anclaje HTML de modo que la página no "saltar" cuando hago clic en él?

Question

Estoy trabajando en algunos de JQuery para mostrar/ocultar algunos de los contenidos que cuando hago clic en un enlace.Puedo crear algo como:

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

Pero si hago clic en ese enlace, mientras yo estoy desplaza hacia abajo en una página, se saltará hacia atrás hasta la parte superior de la página.

Si tengo que hacer algo como:

<a href="" onclick="jquery_stuff" />

La página se recarga, que se libera a la página de todos los cambios que javascript se ha hecho.

Algo como esto:

<a onclick="jquery_stuff" />

Me va a dar el efecto deseado, pero ya no se muestra como un enlace.¿Hay alguna forma de especificar un vacío de anclaje para que yo pueda asignar un controlador de javascript para el onclick evento, sin cambiar nada en la página o mover la barra de desplazamiento?

Answer 1

poner un "return false;" en la segunda opción:

<a href="" onclick="jquery_stuff; return false;" />

Answer 2

Es necesario return false; después de la jquery_stuff:

<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />

Esto cancelará la acción predeterminada.

Answer 3

Usted puede poner simplemente como, como a continuación:

<a href="javascript:;" onclick="jquery_stuff">

Answer 4

jQuery tiene una función integrada en este llamado preventDefault que se puede encontrar aquí: http://api.jquery.com/event.preventDefault/

Aquí está su ejemplo:

<script>
$("a").click(function(event) {
    event.preventDefault();
});
</script>

También es posible construir el enlace de la siguiente manera:

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

Answer 5

Comprobar eyelidlessness' comentario (utilizar un botón, no un ancla). Estaba a punto de publicar el mismo consejo. Un ancla que no está asociada a un recurso y sólo se ejecuta una secuencia de comandos debe ser implementado como un botón.

  

Dejar de poner sus controladores de eventos en HTML, y dejar de usar las etiquetas de anclaje   que no sirven para anclar los propósitos semánticas. Use un botón y añadir el   haga clic en su manejador de Javascript. Ejemplo: HTML y JavaScript <button id="jquery_stuff">Label</button>   $('#jquery_stuff').click(jquery_stuff);. Se puede utilizar CSS para estilizar el   botón para que parezca un enlace, mediante la eliminación de relleno, bordes, márgenes y   background-color, a continuación, añadir el enlace de estilos (por ejemplo. el color y   text-decoration). - eyelidlessness 19 de Oct '10 a las 17:40

Answer 6

<a href="javascript:;" onclick="jquery">link</a>

href requiere algo allí si quieres que no pop-up errores en los validadores de HTML. El javascript:; es un buen marcador de posición.

Si realmente desea utilizar el #:

<a href="#me" name="me" onclick="jquery">link</a>

Tenga cuidado con el return false;, detiene el funcionamiento predeterminado de lo que está haciendo.

Además, si su js es como un presente que puede tener problemas en Internet Explorer.

Answer 7

<a href="javascript:// some helpful comment " onclick="jquery_stuff" />

Answer 8

Yo normalmente uso una <span> y estilo para parecerse a un enlace cuando me necesitan para lograr algo como esto.

Answer 9

  <a href="#" class="falseLinks">Link1</a>
  <a href="#" class="falseLinks">Link2</a>

etc ..

JQUERY:

  $(function() {
    $("a.falseLinks").click(function() {
      // ...other stuff you want to do when links is clicked

      // This is the same as putting onclick="return false;" in HTML
     return false;
    })
  });

@eyelidlessness era un poco douchy en la forma en que lo dijo, pero él tenía razón. Esta es la forma más limpia de hacerlo. ¿Por qué utilizar jQuery si lo que va a continuación, volver a vainilla Javascript para cosas jQuery hace más fácil y más limpio?

Answer 10

Por lo general hago:

<a style="cursor:pointer;" onclick="whatever();">Whatever</a>

Answer 11

¿Qué tal esto:

<a href="#nogo" onclick="foo();">some text</a>