普通的筛选器选项卡

一个很简单的筛选卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../jquery-1.8.3.min.js"></script>
    </head>
    <style>
        ul li{
            list-style-type: none;
            border: 1px solid seagreen;
            margin: 2px;
        }
        #ml{
            width: 20em;
            margin: 0 auto;
            text-align: center;
        }
        #ml li{
            width: 4em;
            height: 30px;
            line-height: 30px;
            float: left;
        }
        #container{
            width: 20em;
            margin: 0 auto;
            word-wrap: break-word;
        }
        #container li{
            width: 4em;
            height: 4em;
            line-height: 4em;
            float: left;
            background: #006699;
            text-align: center;
            color: white;
        }
        .bck{
            width: 4em;
            height: 4em;
            line-height: 4em;
            float: left;
            background: #006699;
            text-align: center;
            display:none ;
            color: white;
        }
    </style>
    <body>
        <ul id="ml">
            <li lx="0">全部</li>
            <li lx="1">A</li>
            <li lx="2">B</li>
            <li lx="3">C</li>
        </ul>
        <ul id="container">
            <li lx="1,2,3">1</li>
            <li lx="2,3">2</li>
            <li lx="1">3</li>
            <li lx="2">4</li>
            <li lx="3">5</li>
            <li lx="1,2">6</li>
            <li lx="1,3">7</li>
            <li lx="1,2,3">8</li>
        </ul>
        <script type="text/javascript">
            (function(){
                $("#ml li").click(function(){
//                    console.info(this);
                    var a=this.getAttribute("lx");
//                    console.info(a);
                    xz(a);
                });
                function xz(way){
                    var items=$("#container li");
                    console.info(items.length);
                    for (var i=0;i<items.length;i++) {
                        var lis=items[i];
                        if(way!=0){
                            var lx=lis.getAttribute("lx");
                            console.info("开始:"+lx);
                            lx=lx.split(",");
                            for(var j=0;j<lx.length;j++){
                                console.info("数组："+lx);
                                if(way==lx[j]){
                                    lis.style.display="block";
                                    console.info("同组织的");
                                    break;
                                }
                                lis.style.display="none";
                            }
                        }else{
                            lis.style.display="block";
                        }
                    }
                }
            })();
        </script>
    </body>
</html>
View Code

这个是简单的，==我会发一个复杂一点的

posted @ 2015-12-24 14:59  时光之梦  阅读(27)  评论(0)    收藏  举报