阻止链接重新加载页面

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

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

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

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

有谁知道我做错了什么？

Answer 1

它不是需要.preventDefault()的元素，它是click event 。

试试这个：

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

我不建议使用href作为选择器，最好给它一个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

使用那样：

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

Answer 4

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

  Click Here  

Answer 5

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

Answer 6

没有jQuery的内联选项：

 Link 

并且不要忘记，你已经使用了函数的“f”名称，所以不要命名其他函数。

Answer 7

试试这个：

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

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

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

编辑我已注释掉第二个function。