（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);
        }
})

}）