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>

  • 相关阅读:
    WPF Caliburn 学习笔记(五)HelloCaliburn
    MSDN 教程短片 WPF 20(绑定3ObjectDataProvider)
    MSDN 教程短片 WPF 23(3D动画)
    比赛总结一
    HDU3686 Traffic Real Time Query System
    HDU3954 Level up
    EOJ382 Match Maker
    UESTC1565 Smart Typist
    HDU3578 Greedy Tino
    ZOJ1975 The Sierpinski Fractal
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2995429.html
Copyright © 2011-2022 走看看