jquery经典实例之显示隐藏

Love The Way You Lie 2021-07-24 18:13 528阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="gbk">
  5.     <title>显示隐藏</title>
  6.     <style>
  7.         #show,#content,#hide,#toggle{
  8.             padding: 2px;
  9.             text-align: center;
  10.             background-color: skyblue;
  11.             border:solid 1px green;
  12.             width:100px;
  13.         }
  14.         #content{
  15.             padding: 100px;
  16.             display: none;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  22.     <div id="show">显示</div>
  23.     <div id="hide">隐藏</div>
  24.     <div id="toggle">toggle</div>
  25.     <div id="content">显示隐藏的内容</div>
  27.     <script src="jquery-1.5.1.js"></script>
  28.     <script>
  29.         $(document).ready(function(){
  30.               $("#show").click(function(){
  31.                  $("#content").slideDown(800);
  32.               });
  33.               $("#hide").click(function(){
  34.                  $("#content").slideUp(800);
  35.               });
  36.               $("#toggle").click(function(){
  37.                  $("#content").slideToggle(800);
  38.               })
  39.           });
  40.     </script>
  42. </body>
  43. </html>

效果图

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，528人围观）

还没有评论，来说两句吧...

相关阅读