我有一个投资组合过滤器,我想将特定过滤器与其他页面链接
<ul class="filter">
<li><a class="active" href="#" data-filter=".cat1">Branding</a></li>
<li><a href="#" data-filter=".cat2">Creative</a></li>
<li><a href="#" data-filter=".cat3">Website Design</a></li>
</ul>
从上面的代码中,它有三个品牌,创意和网站设计。过滤器工作正常,我想将过滤器项目与其他页面链接。 防爆。我想将广告素材与广告素材页面关联起来,点击广告素材页面中的广告素材链接后,应该转到包含广告素材的投资组合页面。我添加这样的链接 http://url.com/portfolio#filter=.cat2但它不起作用
的这个javascript$(document).ready(function () {
var $container = $('.full-portfolio .items');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.item',
layoutMode: 'fitRows',
onLayout: realignCaptions
});
});
// hook to window resize to resize the portfolio items for fluidity / responsiveness
$(window).smartresize(function() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
for ( var i = 0; i < isotopeBreakpoints.length; i++ ) {
if (windowWidth >= isotopeBreakpoints[i].min_width || !isotopeBreakpoints[i].min_width) {
if (windowWidth < isotopeBreakpoints[i].max_width || !isotopeBreakpoints[i].max_width) {
$container.find('.item').each(function() {
$(this).width( Math.floor( $container.width() / isotopeBreakpoints[i].columns ) );
});
break;
}
}
}
});
$(window).trigger( 'smartresize' );
$('.filter li a').click(function () {
$('.filter li a').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});
// Vertically realign the captions inside portfolio items
function realignCaptions($container) {
$container.each(function() {
var $h5 = $(this).find('a h5');
$h5.css( 'margin-top', $(this).height() / 2 - $h5.get()[0].clientHeight / 2 );
});
}
var $wrapper = $('.fix-portfolio .items .item');
$wrapper.find('a h5').css('visibility', 'hidden');
$(document).imagesLoaded(function() {
$wrapper.find('a h5').css('visibility', 'visible');
realignCaptions($wrapper);
});
答案 0 :(得分:0)
我可以想到2个选项。
选项1:
HTML:
<ul class="filter">
<li><a class="active" href="#filter-cat1">Branding</a></li>
<li><a href="#filter-cat2">Creative</a></li>
<li><a href="#filter-cat3">Website Design</a></li>
</ul>
JS:
(function(){
var hash = window.location.hash;
var fitler = '';
if(hash.match(/filter-cat/)){
filter = hash.replace('filter-','.');
}
$container.isotope({
filter: filter
});
})
太懒了测试它,但至少在出现问题时你应该得到逻辑。
选项2:
与选项1相同的逻辑,但使用cookie而不是散列标记。