防止 href="#" 链接更改 URL 哈希

Question

我有一个网站已经利用了 URL 中的哈希值，我不想改变它。当我使用 Zurb Foundation 并使用 href="#" 作为菜单项时，单击它会删除以前的哈希值。

如何覆盖此行为？

更新： 我认为最好保留元素，因为当我更改它时，它会更改绑定到该 HTML 元素的样式。在与设计框架一起使用时，我总是更喜欢保持默认约定，而不是与覆盖的 css 属性混淆。

谢谢。

原文由 Liron Harel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

请阅读 Progressive Enhancement 和 Unobtrusive JavaScript 。

你应该（几乎）永远不会有 href="#" 。它是指向未定义锚点（将是页面顶部）的链接。使用它的人通常会这样做，因为他们想把 JavaScript 挂在上面。

如果你有一个链接，那么它应该指向一个有用的地方。通常，这将是另一个页面，它使用服务器端技术来获得与 JavaScript 相同的效果（尽管速度较慢）。然后，您可以阻止链接的正常行为。

例如：

 <a href="/foo/bar" class="whatever">Foo: Bar</a>

使用脚本：

 addEventListener('click', function (ev) {
    if (ev.target.classList.contains('whatever')) {
        ev.preventDefault();
        loadWithAjax(ev.target.href);
    }
});

如果 JavaScript 做了一些无法在链接中表达的等效功能，那么您一开始就不应该使用链接。使用 <button> ，并认真考虑使用 JavaScript/DOM 而不是 HTML 将其添加到文档中。

（注意：很多人想要支持不识别 classList 或 addEventListener 检查浏览器支持 和查找兼容性例程的旧浏览器作为读者的练习。使用YUI、jQuery 或类似的方法是处理兼容性的一种方法。）

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以侦听点击事件并调用 preventDefault 以阻止浏览器设置哈希。

jQuery 示例：

 $('.mylink').click(function(event){
    event.preventDefault();
});

原文由 Ben Hutchison 发布，翻译遵循 CC BY-SA 3.0 许可协议