我使用jQuery $(window).on('hashchange')
方法来隐藏不相关的部分,除了uri哈希指向的部分。它工作得很漂亮,后退按钮和所有的东西。除了我似乎无法阻止浏览器的默认行为,即向下滚动到具有匹配id
的部分。
这是我的功能。
var AddHashNav = function (hashmatch, container) {
$(window).on('hashchange', function (e) {
if ( !window.location.hash ) {
// empty hash, show only the default header
change_preview(container, container + ' > header');
return false;
}
// Don't do anything to hash links who's ids don't match
else if ( window.location.hash.match(hashmatch) ) {
change_preview(container, window.location.hash);
return false;
}
});
}
var changePreview = function (container, preview) {
$(container + ' >').addClass('hidden');
$(preview).removeClass('hidden');
}
调用者只是
$(document).ready(function () {
// applay AddHashNav to all sections who's id ends in 'preview'
AddHashNav(/preview?/, '.hash-nav-container');
});
我试过e.preventDefault();
和return false;
,似乎都不起作用。
请注意,我试图防止hashChange
事件的行为,而不是click
事件,在这里似乎是不可能的,但我相信至少有人已经设法弄清楚如何做到这一点。
我通过在AddHashNav
构造函数的第一次调用时运行change_preview()
来修复它,因此隐藏了$(document).load()
调用上的部分。
var AddHashNav = function (hashmatch, container) {
// hide all sections except header on load
change_preview()
$(window).on('hashchange', function (e) {
if ( !window.location.hash ) {
// empty hash, show only the default header
change_preview(container, container + ' > header');
return false;
}
// Don't do anything to hash links who's ids don't match
else if ( window.location.hash.match(hashmatch) ) {
change_preview(container, window.location.hash);
return false;
}
});
}
这不是最美丽的解决方案。我不确定为什么它的工作(我认为这是因为部分没有位置在窗口对象,因此不能滚动),但它现在工作。