HTML <a> tag when href=&#34;&#34;</a>的行为

Question

我有这个HTML代码（JSFiddle）

我在< a >

中使用了href=""标记

我无法获得预期的功能（只显示和隐藏div）。但当我将其更改为href="#"时，它可以正常工作。

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

有人可以解释一下这种行为吗？

Answer 1

您的点击事件也会最终触发href。在空链接的情况下，这导致页面刷新，而在＃的情况下，它只是转到页面锚点。在您的click方法中，使用preventDefault（）来阻止链接被跟踪。参见文档：

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

要专门回答与您的代码的关系，您可以更改为：

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

Answer 2

href中的空<a href="">将重新加载页面。

您可以使用href="javascript:void(0);"

Fiddle Demo

或

您可以在点击锚标记时使用event.preventdefault。

Fiddle Demo

Answer 3

如RFC 2396中所述：不包含URI的URI引用是对当前文档的引用。换句话说，文档中的空URI引用被解释为对该文档开头的引用。

因此，要避免这种情况，您必须设置href="#" 或 href="javascript:void(0)"。

Answer 4

href=""重新加载页面

href="#"部分是一种常用的方法，可以确保链接不会在任何地方引导。

＃-attribute用于创建指向同一文档中某些其他部分的链接。因此，如果您在没有任何名称的情况下指定＃，就像您的情况一样，该链接无处可去。

您也可以使用href="javascript:;"

Answer 5

你有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();
});

Answer 6

你应该preventDefault()：

fiddle

Answer 7

href=""是指向当前页面的超链接。换句话说：它将刷新页面。 href="#"是一个“超链接”，可以将您带到页面顶部，但无需刷新，这就是您所需要的。如果刷新，则会在JS代码触发后重新加载绿色方块并重置。

Answer 8

空href=""将导航到该页面，因此请使用

停止默认事件

event.preventDefault();

演示：http://jsfiddle.net/Lp7e7/3/