我有一个网站已经利用了URL中的哈希值,我不想让它改变。当我使用Zurb Foundation并使用href="#"
作为菜单项时,单击它会删除先前的哈希值。
我该如何覆盖此行为?
更新:我认为最好留在元素中,因为当我更改它时,它会更改绑定到该HTML元素的样式。我总是喜欢在使用设计框架时保持默认约定而不是使用重写css属性进行批量处理。
谢谢。
请阅读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或类似方法是处理兼容性的一种方法。)
我的解决方案有点相同,使用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>
我最近选择了它,但我尝试从标签中删除href属性完成并且它工作正常。绝对的
<a href="#" onclick="something"></a>
use
<a onclick="something"></a>
您可以侦听click事件并调用preventDefault
来阻止浏览器设置哈希值。
jQuery示例:
$('.mylink').click(function(event){
event.preventDefault();
});
而不是在href中使用#
,你可以在href中使用javascript:;
,它不会让url改变。
<a href="javascript:;">:Link</a>
而不是使用“#”使用“javascript:void(0)”有关Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?的更多信息,请参阅此链接
只需使用:
<a href="javascript:void()">text</a>
这适合我。
$(document).on('click', 'a', function (e) {
if ($(this).attr('href') == '#') {
e.preventDefault();
}
});
我已经完成了以下操作以防止所有带有href =“#”属性的标签执行导航(使用JQuery):
$('a[href$="#"]').click(function (event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
});
在默认库中包含以下代码。 这将获取click事件的href值,如果找到hash(#)值,则它将阻止默认事件,这将避免重定向到href值。
$(document).on('click', 'a', function (e) {
if ($('#'+e.target.id).attr('href')=='#') {
e.preventDefault();
}
});
最简单的方法是<a href="#hash" onclick="event.preventDefault();"></a>