1. 定义筛选数据
根据标签名生成的按钮组
data-filter="."
<button data-filter="."></button>
2. 给循环渲染出来的每个标签列表添加类名，以标签名作为类名
<section class="zero-grid-item ">...</section>
3. 进行JQuery的筛选。

// 返回选择元素的直接子元素
children()
// 返回被选择元素的第一个元素
first()
// 返回拥有一个或多个元素在内的所有元素
has()
// 返回所选元素的直接父元素
parent()
// 根据需要匹配的选择器过滤元素返回
filter()
// 与filter相对，返回不符合的元素
not()

$(document).ready(function () {
    $('#zero-filter').children().click(function(){
        // 获取自定义的属性
        var data_filter = $(this).attr("data-filter");
        // 重复点击时取消这个标签的激活和切换到全部
        if ($(this).hasClass("active") && data_filter!=='*') {
            $(this).removeClass("active");
            $("#zero-filterItem").children().removeClass("hidden").fadeIn();
            return  $('#zero-filter button').first().addClass("active");
        }
        // 移除所有已经选择过的按钮 active
        $("#zero-filter").children().removeClass("active");
        // 如果点击的当前按钮不是所有    
        if(data_filter!=='*' && !$(this).hasClass("active")){
            // 将过滤具体的标签列表选择返回符合的项目
            // 移除隐藏的类名
            // 显示出来。
            $("#zero-filterItem")
                .children()
                .filter(data_filter)
                .removeClass("hidden")
                .fadeIn();
            /*
        不符合条件的添加隐藏的类名
        移除出去
        */
            $("#zero-filterItem")
                .children()
                .not(data_filter)
                .addClass("hidden")
                .fadeOut();
            // 给这个按钮一个激活状态    
            return $(this).addClass("active");
        }else if(data_filter==='*') {
            // 如果是全部就移除所有的隐藏显示出来
            $("#zero-filterItem")
                .children()
                .removeClass("hidden")
                .fadeIn();
            return $(this).addClass("active");
        }
});});