zoukankan      html  css  js  c++  java
  • 点击按钮显示隐藏淘宝商品-jQuery

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    ul,li,a{margin:0 padding:0;}
    ul,li{list-style:none;}
    ul{1000px;height:30px;line-height:30px;margin:0 auto;}
    li{300px;float:left;text-align:center;border:1px solid #F00;margin-bottom:10px;margin-right:10px;}
    a{clear:both;float:left;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(function(){

    var product=$("ul li:gt(9):not(:last)");
    $("a").click(function(){
    /*alert(product.is(":hidden"));*/
    if(product.is(":hidden")==true)
    {
    product.show();
    $("span").text("隐藏部分商品");

    }
    else
    {
    product.hide();
    $("span").text("显示全部商品");
    }

    });
    })
    </script>
    </head>

    <body>
    <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li>777</li>
    <li>888</li>
    <li>999</li>
    <li>444</li>
    <li>666</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>其它</li>
    <a href="#"><span>隐藏部分商品</span></a>
    </ul>

    </body>
    </html>

  • 相关阅读:
    随笔
    3.1作业
    关于JavaDate数据返回到前端变数字的问题(并引申到前后端时间的传输)
    utf-8转换为base64
    base64转换为utf-8
    Java Web基础——jsp调用动态界面
    Java Web基础——JSP指令标记
    2020软件工程最后一次作业
    软件工程第二次结对作业
    软件工程第三次作业
  • 原文地址:https://www.cnblogs.com/ll-taj/p/5250961.html
Copyright © 2011-2022 走看看