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

Prevent href="#" link from changing the URL hash

本文关键字：URL 哈希 链接 quot href quot# 阻止      更新时间：2023-11-07

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

如何覆盖此行为？

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

谢谢。

您可以监听点击事件并调用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>

我已经做了以下操作来阻止所有具有href="#"属性的标签执行导航（使用JQuery）：

$('a[href$="#"]').click(function (event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        });

这对我有用。

$(document).on('click', 'a', function (e) {
    if ($(this).attr('href') == '#') {
        e.preventDefault();
    }
});

在默认库中有以下代码
这将获取单击事件的href值，如果找到hash（#）值，则它将阻止默认事件，从而避免重定向到href值。

$(document).on('click', 'a', function (e) {
    if ($('#'+e.target.id).attr('href')=='#') {
        e.preventDefault();
    }
});

最简单的方法是<a href="#hash" onclick="event.preventDefault();"></a>

我遇到的最短的就是使用语句末尾字符：

<a href="javascript:;" class="ouvrir">Newsletter</a>

我的解决方案有点相同，使用Javascript：

->更换

<a href=#foo class="ouvrir">Newsletter</a>

发件人：

<a href="javascript://" class="ouvrir">Newsletter</a>

和Javascript：

<script>
    $('.ouvrir').click(function(event){
        window.location.href = "#foo";
        history.pushState('', document.title, window.location.pathname);
    });
</script>
相关文章：