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

Question

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

我该如何覆盖此行为？

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

谢谢.

Answer 1

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

jQuery示例:

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

Answer 2

相反,具有#在HREF,您可以使用javascript:;在HREF这不会让URL变化.

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

Answer 3

请阅读 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执行的某些操作无法在链接中表示相同的功能,那么您不应该首先使用链接.使用a <button>,并认真考虑使用JavaScript/DOM而不是HTML将其添加到文档中.

(注意:很多人都希望支持那些不能识别classList或addEventListener 检查浏览器支持并找到兼容性例程的旧浏览器留给读者使用.使用YUI,jQuery或类似方法是处理兼容性的一种方法.)

Answer 4

而不是使用"#"使用"javascript:void(0)"请参阅此链接以获取更多信息我应该使用哪个"href"值用于JavaScript链接,"#"或"javascript:void(0)"？

Answer 5

只需使用:

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

Answer 6

我已完成以下操作以防止所有带有 href="#" 属性的标签执行导航（使用 JQuery）：

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

        });

Answer 7

这对我有用。

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