商品显示模式切换_html/css_WEB-ITnose

一个简单的商品显示模式切换功能

通过学习 锋利的jquery(edit 2)学到的

            *{            margin: 0;            padding:0;        }        div.container{            margin: 0 auto;            width: 400px;            background-color: #ffd45a;        }        ul{            overflow: hidden;        }        li{            float: left;            width: 100px;            text-align: center;            list-style-type: none;        }        a{            display: block;        }        div#btn{            width: 400px;            text-align: center;            margin: 0 auto;        }    
        
APPLE
            
SONY
            
SUM
            
LG
            
MEIZU
            
MI
            
OPPO
        
    
显示全部商品 
        $(function () {       var $hi=$("ul li:nth-of-type(n+4)").hide();            $("a.btn").click(function () {                if($("a.btn").text()=="显示全部商品"){                    $hi.show();                    $("a.btn").text("显示精简模式");                }                else if ($("a.btn").text()=="显示精简模式"){                    $hi.hide();                    $("a.btn").text("显示全部商品");                }                return false;            })    })

登录后复制