Impedir un enlace para recargar la página

Estoy creando un menú receptivo: Demostración de Codepen

Para evitar que la página se vuelva a cargar cuando hago clic en un enlace, tengo:

$('nav.menu a[href="#"]').click(function () {
  $(this).preventDefault();
});

Pero esto no parece funcionar. Cuando hago clic en un botón, el menú desaparece.

¿Alguien sabe lo que estoy haciendo mal?

$('nav.menu a').click(function (event) {
  event.preventDefault();
  // or use return false;
});

• MDN: evento.preventDefault()
• jQuery: Selectores

Hay una forma de CSS, usando puntero-eventos.

Entonces, al usar en el CSS pointer-events: none; todos los clics serán ignorados. Esta es una alternativa “reciente” y compatible con IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+.

Ejemplo

Aquí hay una manera muy fácil de hacerlo dentro de html.

<a class="font-weight-bold" href="https://stackoverflow.com/questions/18575623/javascript:void(0);"> Click Here </a>

Solo devuelve falso.

$('nav.menu a[href="#"]').click(function () {
  return false
});

Usar así:

$('nav.menu a[href="#"]').click(function (event) {
  event.preventDefault();
});

$('nav.menu a[href="#"]').click(function (e) {
   e.preventDefault();
});

Prueba esto:

$('.menu a').click(function(e){
   e.preventDefault(); // stop the normal href from reloading the page.
});

Ejemplo de código abierto de trabajo: http://codepen.io/anon/pen/cynEg

No tenía una referencia a la biblioteca jquery incluida. Además, la función ‘consultar’ ahora arroja un error, pero preventDefault está funcionando.

Editar He comentado la segunda función.

Y una opción en línea sin jQuery:

<a href="https://stackoverflow.com/questions/18575623/javascript:function%20f(e){e.preventDefault();}">Link</a>

Y no olvide que con esto ya ha usado el nombre “f” para una función, así que no nombre otras funciones como esta.