（HTML：数据过滤器属性）如何设置默认属性部分，而不是在页面加载时显示所有record。

Question

我需要设置默认过滤器值，而不是显示所有元素。

加载Page后，默认情况下将显示所有值，并且在单击锚点时将显示特定的过滤器值（例如本示例中的蓝色）。

对于给定的示例：页面加载后，需要显示蓝色元素而不是显示所有颜色。 默认情况下会显示所有值，但是我需要一个特定的颜色数据值。

CSS：

section {
    display: block;
    float: left;
    border: 2px solid green;
    min-height: 300px;
    width: 100%;
    border-radius: 4px;
}
a {
    display: block;
    float: left;
    width: 25%;
    text-decoration: none;
    text-align: center;
    padding: 5px 0;
    color: white;
    background: #1271C7;
}
div {
    display: block;
    float: left;
    height: 40px;
    width: 40px;
    border: 1px solid black;
    margin: 10px;
    -webkit-transition: all .8s linear;
    -moz-transition: all .8s linear;
    -o-transition: all .8s linear;
    -ms-transition: all .8s linear;
    transition: all .8s linear;
    margin-top: 20px;
}
div[data-filter="red"] {
    background: red;
}
div[data-filter="green"] {
    background: green;
}
div[data-filter="blue"] {
    background: blue;
}
a:focus[data-filter] {
    opacity: .8;
    outline: none;
}
a[data-filter="red"]:focus ~ div:not([data-filter="red"]) {
    height: 0px;
    width: 0px;
    border: none;
    margin: 0;
}
a[data-filter="green"]:focus ~ div:not([data-filter="green"]) {
    height: 0px;
    width: 0px;
    border: none;
    margin: 0;
}
a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]) {
    height: 0px;
    width: 0px;
    border: none;
    margin: 0;
}   

HTML：

<section>
    <a id="tab2" href="#" data-filter="red" tabindex="-1">RED</a>
    <a id="tab3" href="#" data-filter="green" tabindex="-1">GREEN</a>
    <a id="tab4" href="#" data-filter="blue" tabindex="-1">BLUE</a>

    <div data-filter="red"/>
    <div data-filter="blue"/>
    <div data-filter="red"/>
    <div data-filter="blue"/>
    <div data-filter="green"/>
    <div data-filter="red"/>
    <div data-filter="red"/>
    <div data-filter="red"/>
    <div data-filter="blue"/>
    <div data-filter="green"/>
    <div data-filter="blue"/>
    <div data-filter="green"/>
    <div data-filter="green"/>
</section> 

Answer 1

您可以使用jQuery定制您的应用程序。 单独使用CSS不能做到这一点。 这是使用jQuery的解决方案。 $（document）.ready（function（）{$（'div [data-filter =“ red”'）。show（0）; //页面加载时只有红色列

 $("a").click(function(e){
    e.preventDefault();
    var x=$(this).attr("data-filter");  //returns data-filter value of a tag
     if(x=="all"){
             $('div[data-filter').show(0);   
    }
        else{                
    $("div[ data-filter]").hide(0);
    $('div[data-filter="' + x +'"]').show(0);
        }
})

}）