zoukankan      html  css  js  c++  java
  • JQuery点击打开再点击关闭

     1  $("#03").click(function()
     2        {     
     3         $("#03").show(speed);
     4         $("#03").css("cursor","pointer");
     5         $(".tableBorder4").toggle(1000); 
     6        })
     7 
     8  
     9 
    10 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    11 <html xmlns="http://www.w3.org/1999/xhtml">
    12 <head>
    13 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    14 <title>无标题文档</title>
    15 <script src="http://ybin.cn/js/jq.min.js" type="text/javascript"></script>
    16 <script type="text/javascript">
    17 $(document).ready(  function(){});
    18 function hiden(){
    19 $("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
    20 }
    21 function slideToggle(){
    22 $("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
    23 }
    24 function show(){
    25 $("#divObj").show();//显示,参数说明同上
    26 }
    27 function toggle(){
    28 $("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
    29 
    30 }
    31 function slide(){
    32 $("#divObj").slideDown();//窗帘效果展开
    33 }
    34 </script>
    35 </head>
    36 
    37 <body>
    38 <h3>div里内容的显示隐藏特效</h3>
    39 <input type="button" value="隐藏" onclick="hiden()"/>
    40  <input type="button" value="显示" onclick="show()"/>
    41  <input type="button" value="窗帘效果显示2" onclick="slide()"/>
    42  <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
    43   <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
    44 <div id="divObj" style="display:none">
    45         1.测试例子<br/>
    46         2.测试例子<br/>
    47         3.测试例子<br/>
    48         4.测试例子<br/>
    49         5.测试例子<br/>
    50         6.测试例子<br/>
    51         7.测试例子<br/>
    52         8.测试例子<br/>
    53         9.测试例子<br/>
    54         0.测试例子<br/>
    55     </div>
    56 </body>
    57 </html>
    58 
    59  

    $("#03").click(function() { $("#03").show(speed); $("#03").css("cursor","pointer"); $(".tableBorder4").toggle(1000); })

    无标题文档

    div里内容的显示隐藏特效

  • 相关阅读:
    HyperV Server 2008 R2 包含简体中文 下载
    Javascript实现把网页中table的内容导入到excel中的几种方法
    C# WebRequest WebClient Post请求 无乱码
    聊聊我对开发项目选技术的看法
    聊聊我对开发项目选技术的看法2
    企业的虚拟化发展
    不成文的期望
    Deep Zoom Composer 小工具 三步 5分钟
    2009829 周末
    复制文章时自动在文章末尾加上来源网址的代码
  • 原文地址:https://www.cnblogs.com/dqh123/p/9470071.html
Copyright © 2011-2022 走看看