• 动态列表效果


    点击按钮 一部分被隐藏或显示 :

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.3.js"></script>//引入调用
    <style type="text/css">//设置css样式
    #box{
    600px;
    height: 600px;
    margin:0 auto;
    }
    td{
    200px;
    height: 50px;
    text-align: center;
    }
    #inp{
    600px;
    text-align: center;
    margin:0 auto;
    }
    input{
    100px;
    height: 40px;
    }
    </style>
    <script type="text/javascript">//jquery设置  关键部分
    $(function(){
    $("input").click(function(){
    $(".a1").toggle();
    });
    });
    </script>


    </head>


    <body>


    <div id="box">
    <table border="0" cellspacing="0" cellpadding="0"id="table1">
    <tr>
    <td><a href="#">佳能</a>(30440)</td>
    <td><a href="#">索尼</a>(30440)</td>
    <td><a href="#">三星</a>(30440)</td>
    </tr>
    <tr>
    <td><a href="#">尼康</a>(30440)</td>
    <td><a href="#">松下</a>(30440)</td>
    <td><a href="#">卡西欧</a>(30440)</td>
    </tr>
    <tr>
    <td class="a1"><a href="#">富士</a>(30440)</td>
    <td class="a1"><a href="#">柯达</a>(30440)</td>
    <td class="a1"><a href="#">宾得</a>(30440)</td>
    </tr>
    <tr>
    <td class="a1"><a href="#">理光</a>(30440)</td>
    <td class="a1"><a href="#">奥林巴斯</a>(30440)</td>
    <td class="a1"><a href="#">明基</a>(30440)</td>
    </tr>
    <tr>
    <td class="a1"><a href="#">爱国者</a>(30440)</td>
    <td class="a1"><a href="#">其他品牌相机</a>(30440)</td>

    </tr>
    </table>
    <div id="inp">
    <input type="button" id="" value="收放"onclick="change()" />
    </div>

    </div>


    </body>
    </html>2019-01-17

  • 相关阅读:
    spring基础
    hibernate基础
    struts2基础
    javaEE(17)_邮件原理与JavaMail开发
    javase(14)_java基础增强
    javase(13)_网络编程
    javase(12)_集合框架_Queue
    C++:memset ,memcpy 和strcpy 的根本区别!
    16位的二进制数,每4位为一个数,写函数求他们的和
    态度!!!
  • 原文地址:https://www.cnblogs.com/zyEthan/p/10280988.html
Copyright © 2020-2023  润新知