zoukankan      html  css  js  c++  java
  • jQuery的显示和隐藏

      在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

      隐藏例子:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>jquey隐藏显示</title>
     6      <!--     jquery文件自己下载引用近来即可,我这里是1.12.0的压缩版 -->
     7     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
     8     <script type="text/javascript">
     9         $(document).ready(function(){
    10            $('p').click(function(){
    11                $(this).hide();
    12            }) 
    13         })
    14     </script>
    15 </head>
    16 <body>
    17       <p>点我,消失</p>
    18       <p>点我,我也消失</p>
    19 </body>
    20 </html>

      通过 jQuery,还可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jquey隐藏显示</title>
        <style>
              div{width:100px;height:100px;border:1px solid red;}
        </style>
         <!--     jquery文件自己下载引用近来即可,我这里是1.12.0的压缩版 -->
        <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
               $('.show1').click(function(){
                   $('div').show(1000);
               }) 
               $('.hide1').click(function(){
                   $('div').hide(1000);
               }) 
            })
        </script>
    </head>
    <body>
        <button class="show1">显示</button>
        <button class="hide1">隐藏</button>
          <div>
              <p>点我,消失</p>
          <p>点我,我也消失</p>
          </div>
    </body>
    </html>

      通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

      例子:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>jquey隐藏显示</title>
     6     <style>
     7           div{width:100px;height:100px;border:1px solid red;}
     8     </style>
     9      <!--     jquery文件自己下载引用近来即可,我这里是1.12.0的压缩版 -->
    10     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    11     <script type="text/javascript">
    12         $(document).ready(function(){
    13           $(".show1").click(function(){
    14             $("div").toggle("slow");
    15             });
    16          });
    17     </script>
    18 </head>
    19 <body>
    20     <button class="show1">显示&隐藏</button>
    21       <div>
    22           <p>点我,消失</p>
    23       <p>点我,我也消失</p>
    24       </div>
    25 </body>
    26 </html>
  • 相关阅读:
    Why to define my own blog skin
    安装drupal7.7
    同步和异步的区别
    神马是云计算神马是物联网
    zen主题安装图文记录
    《那些年啊,那些事——一个程序员的奋斗史》——127
    《一个程序员的奋斗史》帮我选封面哇! —— 猜封面页数赢赠书活动~
    《那些年啊,那些事——一个程序员的奋斗史》——126
    《那些年啊,那些事——一个程序员的奋斗史》——128 (终章)
    伍定轩乱语
  • 原文地址:https://www.cnblogs.com/songtianfa/p/11289072.html
Copyright © 2011-2022 走看看