阻止链接重新加载页面

Question

我正在创建一个响应式菜单:Codepen Demo

为了避免在我点击链接时重新加载页面,我有:

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

但这似乎不起作用.单击按钮时,菜单消失.

有谁知道我做错了什么？

Answer 1

它不是需要的元素.preventDefault(),它的点击event.

试试这个:

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

我不建议使用hrefas选择器,最好给它一个id或name.

从MDN,关于.preventDefault():如果事件可以取消,则
取消该事件,而不停止事件的进一步传播.

你可以在这里阅读更多:

• MDN:event.preventDefault()
• jQuery:选择器

有一种CSS方式,使用指针事件.

因此,通过在CSS中使用,pointer-events: none;将忽略所有点击.这是一个"最近的"替代品,并且支持IE11 +,Firefox 3.6 +,Chrome 2.0 +,Safari 4+.

例

Answer 2

只是返回false.

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

Answer 3

这是在 html 中执行此操作的非常简单的方法。

<a class="font-weight-bold" href="javascript:void(0);"> Click Here </a>