我有一个网站已经利用了 URL 中的哈希值，但我不想更改它。当我使用 Zurb Foundation 并href="#"用于菜单项时，单击它会删除以前的哈希值。
如何覆盖此行为？
更新：我认为最好保留元素，因为当我更改它时，它会更改绑定到该 HTML 元素的样式。在与设计框架一起使用时，我总是更喜欢保持默认约定，而不是与覆盖的 css 属性混淆。
谢谢。
防止 href="#" 链接更改 URL 哈希
IT技术
javascript
html
zurb-foundation
2021-03-19 19:10:19
6个回答
您可以侦听单击事件并调用preventDefault以阻止浏览器设置哈希。
jQuery 示例：
$('.mylink').click(function(event){
event.preventDefault();
});
请阅读 渐进增强和非侵入式 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 或类似的方法是处理兼容性的一种方法。）
相反，具有#在HREF，您可以使用javascript:;在HREF这不会让URL变化。
<a href="javascript:;">:Link</a>
使用“javascript:void(0)”代替“#”，请参阅此链接以获取更多信息，我应该将哪个“href”值用于 JavaScript 链接，“#”还是“javascript:void(0)”？
只需使用这个：
<a href="javascript:void()">text</a>