我有这个 HTML 代码 (JSFiddle)
在那里我使用了< a > 标签和href=""
我无法获得预期的功能（仅显示和隐藏 div）。但是当我将其更改为href="#" 时，它工作正常。
为什么我使用href=""时会这样？
谁能解释一下这种行为？
【问题讨论】：
您的点击事件也最终触发了 href。在空链接的情况下，这会导致页面刷新，而在 # 的情况下，它只是转到页面锚点。在您的 click 方法中，使用 preventDefault() 来阻止链接被跟踪。请参阅文档：
http://api.jquery.com/event.preventdefault/
要具体回答与您的代码相关的问题，您可以改为：
$(document).ready(function(){
$('#inboxHeaderLink').click(function(e) {
e.preventDefault();
$('#newMessage').show();
$('#viewMessage').hide();
});
});
【讨论】：
<a href=""> 中有空的href 将重新加载页面。
你可以使用href="javascript:void(0);"
或
您可以在点击锚标记时使用event.preventdefault。
【讨论】：
你应该做一个preventDefault()：
【讨论】：
href="" 是指向当前页面的超链接。换句话说：它将刷新页面。
href="#" 是一个“超链接”，可将您带到页面顶部，但无需刷新，这正是您所需要的。如果刷新，绿色方块会在 JS 代码触发后重新加载并重置。
【讨论】：
如 RFC 2396 中所述：不包含 URI 的 URI 引用是对当前文档的引用。换句话说，文档中的空 URI 引用被解释为对该文档开头的引用。
因此，为避免这种情况，您必须设置href="#" 或 href="javascript:void(0)"。
【讨论】：
href="" 重新加载页面
href="#" 部分是一种常用的方法，可确保链接不会单独指向任何地方。
#-attribute 用于创建指向同一文档中其他部分的链接。因此，如果您指定 # 而没有像您的情况那样的任何名称，则链接将无处可去。
你也可以使用href="javascript:;"
【讨论】：
【讨论】：
你有 2 个选项。如果你想通过 html 阻止标签默认事件，那么这样写
<div id="inboxHeader">
<div id="inboxNewMessage"><a id="inboxHeaderLink" href="javascript:void(0);">Click</a></div>
</div>
如果你想通过 jquery 来阻止它，那么就这样写
$('#inboxHeaderLink').click(function(e) {
e.preventDefault();
$('#newMessage').show();
$('#viewMessage').hide();
});
【讨论】：