• Jquery实现的小功能2、显示品牌的列表


    主要功能介绍:点击显示全部显示品牌则出现全部的商品

                             如果在点击全部商品则会又出现精简列表

                         利用css样式实现的功能:

                              鼠标移到商品上还会出现换色

                              让商品显示的格局比较美观一些

    <html>
    <head>
        <meta charset="utf-8"/>
        <script  src="jquery-1.4.2.min.js"></script>//在此处的Jquery文件封装的js文件下载地址http://download.csdn.net/detail/feilong_12/5210621
        <style>
        *{margin:0;padding:0;}    
        body{ font-size:15px;text-align:center;}
        .showLess{margin:auto;600px;}
        .showLess ul li{display:block;float:left;200px;line-height:30px;}
        .showMore{ clear:both;padding-top:15px;cursor:pointer;}
        a{text-decoration:none;}
        a:hover{color:red;text-decoration:underline}
        </style>
        <script>
            $(function(){
                    var $hello=$(".showLess ul li:gt(2):not(:last)");
                    $hello.hide();
                    $(".showMore  a span").toggle(function(){
                            $hello.show();
                            $(".showMore a span").text("精简显示品牌");
                    },function(){
                                $hello.hide();
                                $(".showMore a span").text("显示全部品牌");
                    })
            })
        </script>
    </head>
    <body>
        <div class="showLess">
            <ul>
                    <li><a href="#">美利达</a></li>
                    <li><a href="#">宝岛</a></li>
                    <li><a href="#">艾玛</a></li>
                    <li><a href="#">巴赫</a></li>
                    <li><a href="#">奥迪</a></li>
                    <li><a href="#">宝马</a></li>
                    <li><a href="#">二八</a></li>
                    <li><a href="#">八哥</a></li>
                    <li><a href="#">更多品牌</a></li>
    <ul>
    <div class="showMore"><a><span href="#">显示更多商品</span></a></div>
            
            
        
        </div>
    </body>
    </html>

  • 相关阅读:
    JavaScript Object Notation 轻量级的数据交换 json
    一步步打造基于ASP.NET的CMS内容管理系统Step3 添加新闻页面
    显示MSSQL SQL语句执行的时间
    解决国外空间数据库乱码的问题
    一步步打造基于ASP.NET的CMS内容管理系统Step4 权限设定(补充)
    笔记本键盘输入法失灵:fn键功能反了
    Jquery:十分钟打造一个类似是Twitter的系统,附源代码
    一步步打造基于ASP.NET的CMS内容管理系统Step1类别管理
    一步步打造基于ASP.NET的CMS内容管理系统Step2 系统配置(附源代码)
    google走后,google地图,google adsens等相关问题的看法
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2995429.html
Copyright © 2020-2023  润新知