商品显示模式切换_html/css_WEB-ITnose-HTML Tutorial-php.cn

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

WBOY

Release： 2016-06-21 08:50:13

Original

1133 people have browsed it

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

通过学习 锋利的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>

Copy after login