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

Question

I need that default filter value should be set, instead of showing all elements.

Once Page is loaded, By default all values are getting displayed and on click of anchor specific filter values are getting displayed (like blue color in this example).

For Given Example: After page load, instead of showing all color, Blue color elements needs to be shown. By default all values are getting displayed, but I need a specific color data value.

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

You can use jQuery to customize your app. Using css alone you can't do this. here is the solution using jquery. $(document).ready(function(){ $('div[data-filter="red"').show(0); // only red column on page load

 $("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);
        }
})

})