zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Java帮助文档的生成
    Java内部类
    Java中利用标签跳出外层循环break
    【转】你真的了解word-wrap和word-break的区别吗?
    Office/Access 2013 扩展支持xbase/DBF 文件
    调用cmd.exe执行pdf的合并(pdftk.exe)
    input 数字输入控制(含小数)
    iis7.5 发布mvc出错的解决办法
    table中超过长度的列,显示省略号
    本地图片的预览和上传
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2995429.html
Copyright © 2011-2022 走看看