Question

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

如何覆盖此行为？

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

感谢。

Answer 1

您可以侦听点击事件并致电preventDefault以停止浏览器设置哈希值。

jQuery示例：

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

Answer 2

您可以在href中使用#而不是href中的javascript:;，而不会让网址更改。

<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执行的某些内容无法在链接中表达相同的功能，那么您就不应该首先使用链接。使用<button>，并认真考虑使用JavaScript / DOM而不是HTML将其添加到文档中。

（注意：很多人都希望支持那些不会识别classList或addEventListener checking browser support的旧浏览器，并且找到兼容性例程留给了使用YUI，jQuery或类似方法是处理兼容性的一种方法。）

Answer 4

使用“javascript：void（0）”而不是使用“＃” 有关详细信息，请参阅此链接Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Answer 5

只需使用：

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

Answer 6

这对我有用。

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

Answer 7

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

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

        });

Answer 8

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

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

Answer 9

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

Answer 10

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

- ＆GT;取代

<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>

Answer 11

我最近选择了它，但我尝试从标记中删除href属性完成并且它工作正常。

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

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

11 个答案: