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

问题描述 投票:37回答:11

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

我该如何覆盖此行为?

更新:我认为最好留在元素中,因为当我更改它时,它会更改绑定到该HTML元素的样式。我总是喜欢在使用设计框架时保持默认约定而不是使用重写css属性进行批量处理。

谢谢。

javascript html zurb-foundation
11个回答
25
投票

请阅读Progressive EnhancementUnobtrusive 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将其添加到文档中。

(注意:很多人都希望支持那些不能识别classListaddEventListener checking browser support的旧浏览器,并且找到兼容性例程留给读者练习。使用YUI,jQuery或类似方法是处理兼容性的一种方法。)


1
投票

我的解决方案有点相同,使用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>

-2
投票

我最近选择了它,但我尝试从标签中删除href属性完成并且它工作正常。绝对的

<a href="#" onclick="something"></a>
    use 
<a onclick="something"></a>

39
投票

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

jQuery示例:

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

30
投票

而不是在href中使用#,你可以在href中使用javascript:;,它不会让url改变。

<a href="javascript:;">:Link</a>

10
投票

而不是使用“#”使用“javascript:void(0)”有关Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?的更多信息,请参阅此链接


9
投票

只需使用:

<a href="javascript:void()">text</a>

4
投票

这适合我。

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

3
投票

我已经完成了以下操作以防止所有带有href =“#”属性的标签执行导航(使用JQuery):

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

        });

2
投票

在默认库中包含以下代码。 这将获取click事件的href值,如果找到hash(#)值,则它将阻止默认事件,这将避免重定向到href值。

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

1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.