jquery - href =""时 HTML <a> 标签的行为

Question

我有这个 HTML 代码 ( JSFiddle )

我用了一个 < a >用 href="" 标记

我无法获得预期的功能(只是显示和隐藏一个 div)。但是当我把它改成href="#"它工作正常。

为什么我用href=""时会这样？

谁能解释一下这种行为？

Answer 1

您的点击事件也最终触发了 href。在空链接的情况下，这会导致页面刷新，而在 # 的情况下，它只是转到页面 anchor 。在您的点击方法中，使用 preventDefault() 来阻止链接被跟踪。请参阅文档:

http://api.jquery.com/event.preventdefault/

要具体回答与您的代码相关的问题，您可以更改为:

    $(document).ready(function(){
    $('#inboxHeaderLink').click(function(e) {
        e.preventDefault();
        $('#newMessage').show();
        $('#viewMessage').hide();
    });
});