• 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>

  • 相关阅读:
    mysql数据库优化课程---3、数据库设计是什么
    mysql数据库优化课程---2、命令其实也就是那几个单词
    mysql数据库优化课程---1、数据库的本质是什么
    php特级课---4、网站服务监控(常用网站服务监控软件有哪些)
    php特级课---5、网络数据转发原理
    php特级课---3、常用的网站加速技术有哪些
    php特级课---2、网站大数据如何存储
    php特级课---1、网站大访问量如何解决
    网络工程师课程---7、网络通信综合实验(做网络基础综合实验 用什么软件)
    Objective-C路成魔【2-Objective-C 规划】
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2995429.html
Copyright © 2020-2023  润新知