我目前在使用 jQuery isotope 插件和 hashchange 函数时遇到了一些问题。我有一个 div 网格,在页面加载时仅显示grid-block-filter
div,单击其中一个.grid-block-filter
div 会带来相关内容,将哈希附加到 url,以便用户可以从其他地方导航到它,这一切都很好,这里是我的例子虽然我会解释我的问题:
jsFiddle(带哈希):http: //jsfiddle.net/neal_fletcher/vcffM/9/show
jQuery:
$(document).ready(function () {
var $container = $('#main-grid');
if (location.hash != "") {
var hashfilter = "." + location.hash.substr(1);
} else {
var hashfilter = "*";
}
$container.imagesLoaded(function () {
$container.isotope({
filter: hashfilter + '.nav-block',
itemSelector: '.grid-block',
animationEngine: 'best-available',
masonry: {
columnWidth: 4
}
});
});
$('.grid-block-filter a').click(function () {
var selector = jQuery(this).attr('data-filter');
var prettyselector = selector.substr(1);
location.hash = prettyselector;
return false;
});
$(window).hashchange(function () {
if (location.hash != "") {
var hashfilter = "." + location.hash.substr(1);
} else {
var hashfilter = "*";
}
$container.imagesLoaded(function () {
$container.isotope({
filter: hashfilter,
itemSelector: '.grid-block',
animationEngine: 'best-available',
masonry: {
columnWidth: 4
}
});
});
});
});
例如,如果您单击,ONE FILTER
则可以很好地引入相关内容,但是单击后退按钮会返回所有内容,而不是仅grid-block-filter
在页面加载时显示原样。有没有办法阻止这种情况发生?我想不通。任何建议将不胜感激!