Question

请查看以下网址：http://demo.templaza.com/w/vania/您会注意到，您可以按相关性All | Images | Videos | Post查看div。当所有部分加载div时，我一直尝试做的就是简单的HTML5对于所有类型的帖子，我可以通过相关性快速查看每个帖子，就像在上面的URL上完成一样。任何人都可以按照我从所有生成的div等过滤图像的方式为我提供完成此类功能的方向。

我一直在为使用image = class="image"，视频= class="video"等的div使用类名。只是想知道如何创建此过滤器。

Answer 1

类似的东西：

$('#FilterByAll').on('click', function(){
    $('div').show(); 
});

$('#FilterByImage').on('click', function(){
    $('div').not('.image').hide(); 
    $('.image').show();
});

$('#FilterByPost').on('click', function(){
    $('div').not('.post').hide();
    $('.post').show();
});

应该适合你。见JSFiddle

Answer 2

您提到的网站使用名为isotope

的jquery插件

http://jsfiddle.net/AYQET/

// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
  // options...
});

// filter items when filter link is clicked
$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});

Answer 3

看起来您给出的示例网址是使用插件来执行此操作（同位素）。

但基本上你需要实现这种平滑效果的是一个JS函数，它遍历你所有的div并添加/删除一个hidden类，具体取决于它的类是否与点击的按钮相匹配。 / p>

$('div').not('.someClass').addClass('hidden');

或

$('div.someClass').removeClass('hidden');

通过添加和删除类hidden（而不是全部使用JS）来实现这一点意味着您可以利用CSS3过渡来淡入/淡出div，优化浏览器性能并允许更有趣的过渡

CSS看起来类似于：

//default div
div{
    opacity: 1;
    transition: opacity 1s linear;
}
//toggled class
div.hidden{
    opacity:0;
}

只是一个非常基本的例子，但是：CSS TRANSITION FILTER FIDDLE

显示所有div并按类别选择

3 个答案: