jQuery筛选元素及排序特效代码插件

jQuery筛选元素及排序特效代码插件

jQuery实现点击筛选条件,下方显示内容变成你所需要的筛选元素内容。jq22内的data-category属性里面的数字填上 nav内的data-filter属性里面的数字,可以多选 以逗号,隔开。

使用方法
引入需要用到的JS代码文件

1
2
<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.js"></script>

JS代码

1
2
3
4
5
6
7
$(function() {
    $('.jq22').filterizr();

    $('.nav li').on('click', function() {
        $(this).toggleClass('active').siblings().removeClass('active');
    });
});

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<ul>
    <li data-filter="all">全部</li>
    <li data-filter="1">城市</li>
    <li data-filter="2">自然</li>
    <li data-filter="3">工业</li>
    <li data-filter="4">白昼</li>
    <li data-filter="5">夜景</li>
</ul>
<div>
    <div data-category="1, 5">
        <img src="img/a1.png" alt="">
    </div>
    <div data-category="2, 5">
        <img src="img/a2.png" alt="">
    </div>
    <div data-category="1, 4">
        <img src="img/a3.png" alt="">
    </div>
    <div data-category="3">
        <img src="img/a4.png" alt="">
    </div>
    <div data-category="3, 4">
        <img src="img/a5.png" alt="">
    </div>
</div>

文件信息:

    3

    发表评论