商品顯示模式切換

語折發表於2016-04-25
模式

一個簡單的商品顯示模式切換功能
通過學習鋒利的jquery(edit 2)學到的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            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;
        }
    </style>
    <script src="javascript/jquery-2.2.3.min.js"></script>

</head>
<body>
    <div class="container">
        <ul>
            <li><a href="">APPLE</a></li>
            <li><a href="">SONY</a></li>
            <li><a href="">SUM</a></li>
            <li><a href="">LG</a></li>
            <li><a href="">MEIZU</a></li>
            <li><a href="">MI</a></li>
            <li><a href="">OPPO</a></li>
        </ul>
    </div>
    <div id="btn"><a href="" class="btn">顯示全部商品</a> </div>

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




    })
</script>
</body>
</html>

相關文章