javascript - bootstrap - ¿Cómo puedo crear un anclaje HTML vacío para que la página no "salte" cuando hago clic en él?

smooth scroll bootstrap

Question

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

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

Pero si hago clic en ese enlace mientras estoy desplazado hacia abajo en una página, volverá a la parte superior de la página.

Si hago algo como:

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

La página se volverá a cargar, lo que anulará la página de todos los cambios que javascript haya realizado.

Algo como esto:

<a onclick="jquery_stuff" />

Me dará el efecto deseado, pero ya no aparece como un enlace. ¿Hay alguna forma de especificar un anclaje vacío para poder asignar un controlador de JavaScript al evento onclick , sin cambiar nada en la página o mover la barra de desplazamiento?

Answer 1

Debes return false; después del jquery_stuff :

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

Esto cancelará la acción predeterminada.

Answer 2

Ponga un "retorno falso"; en la segunda opción:

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

Answer 3

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

Answer 4

Usualmente uso un <span> y lo estilo para que parezca un enlace cuando necesito lograr algo como esto.

Answer 5

Usualmente lo hago:

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

Answer 6

Puede poner simplemente como a continuación:

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

Answer 7

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

href requiere algo allí si no desea que aparezcan errores en validadores para html. El javascript:; es un buen marcador de posición.

Si realmente quieres usar el # :

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

Tenga cuidado con el resultado return false; , detiene los comportamientos predeterminados de lo que sea que estés haciendo.

Además, si su js es como un envío, puede tener problemas con Internet Explorer.

Answer 8

Qué tal esto:

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

Answer 9

Verifique el comentario del párpado (use un botón, no un anclaje). Estaba a punto de publicar el mismo consejo. Un ancla que no se vincula a un recurso y simplemente ejecuta un script debe implementarse como un botón.

Deje de poner sus controladores de eventos en HTML, y deje de usar etiquetas de anclaje que no sirvan para fines semánticos de anclaje. Use un botón y agregue el controlador de clic en su Javascript. Ejemplo: HTML <button id="jquery_stuff">Label</button> y JavaScript $(''#jquery_stuff'').click(jquery_stuff); . Puede usar CSS para darle un estilo al botón para que parezca un enlace, eliminando el relleno, los bordes, el margen y el color de fondo, y luego agregue los estilos de enlace (por ejemplo, color y decoración de texto). - Falta de párpados Oct 19 ''10 a las 17:40

Answer 10

jQuery tiene una función incorporada para esto llamada 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 puedes construir el enlace así:

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

Answer 11

 <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 estaba un poco douchy en la forma en que lo dijo, pero tenía razón. Esta es la forma más limpia de hacerlo. ¿Por qué utilizar jQuery si luego vas a volver a Javascript vainilla para cosas jQuery es más fácil y más limpio?