阻止链接重新加载页面

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;
});

我不建议使用href作为选择器，最好是给它id或name。

  

来自MDN，关于.preventDefault（）：
  如果可取消，则取消事件，而不停止进一步传播事件。

你可以在这里阅读更多内容：

• MDN：event.preventDefault()
• jQuery：Selectors

---

有一种CSS方式，使用pointer-events。

因此，通过在CSS pointer-events: none;中使用，所有点击都将被忽略。这是一个“最近的”选择，并且支持IE11 +，Firefox 3.6 +，Chrome 2.0 +，Safari 4 +。

Example

Answer 2

只是返回false。

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

Answer 3

使用：

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

Answer 4

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

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

Answer 5

试试这个：

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

工作代码集示例：http://codepen.io/anon/pen/cynEg

您没有对包含的jquery库的引用。 'inquire'函数现在抛出一个错误，但preventDefault正在工作。

编辑我已注释掉第二个功能。

Answer 6

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

Answer 7

没有jQuery的内联选项：

<a href="javascript:function f(e){e.preventDefault();}">Link</a>

并且不要忘记这一点，你已经使用了＆＃34; f＆＃34;函数的名称，所以不要命名其他函数。