Javascript 防止链接重新加载页面

我正在创建一个响应菜单：

为避免在单击链接时重新加载页面，请执行以下操作：

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

但这似乎不起作用。当我点击一个按钮时，菜单消失了

---

有人知道我做错了什么吗？

不是元素需要

.preventDefault（）

，而是单击

事件

试试这个：

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

不过，我不建议使用
href
作为选择器，最好给它一个
id
或
名称

从MDN，关于.preventDefault（）：

取消事件（如果可以取消），而不停止事件的进一步传播



您可以在此处阅读更多内容：


MDN:
jQuery:


有一种CSS方式，使用。
因此，在CSS
指针事件中使用：none所有单击将被忽略。这是一个“最新”的替代方案，在IE11+、Firefox 3.6+、Chrome 2.0+、Safari 4+中得到支持

只要返回false

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

这样使用：

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

试试这个：

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

工作代码笔示例：

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

编辑我已注释掉第二个函数
 和不带jQuery的内联选项：

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

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



不要忘了，在这里，你已经为一个函数使用了“f”名称，所以不要这样命名其他函数。
这里有一个非常简单的方法可以在html中实现

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


我也喜欢return false。我尝试了你的建议，但在我的示例中，它不起作用。尝试查看我的CodePen示例…@Shapper我从未使用过CodePen，但它似乎没有包含jquery库。您需要在代码中链接到它。正在返回“$is not defined”。可能的副本请参见此答案：这实际上是解决方案。我尝试了您的建议，但在我的示例中，它不起作用。我只想在href的链接中使用它=#“哪些是有子菜单的。。。尝试检查我的代码笔示例…@Shapper，刚刚检查了你笔上的控制台。它没有加载jQuery，这就是为什么。检查这里：我尝试了你的建议，但在我的例子中，它不起作用。试着检查一下我的代码笔示例……不要只是链接到代码笔，如果你的链接中断了，你的答案就没用了。@MatthewHinea抱歉，我是一个真正的新手时写的。现在更新。