欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery的显示和隐藏

程序员文章站 2023-02-24 12:37:55
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素 ......

　　在 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>

 

上一篇： js学习心得_一个简单的动画库封装tween.js

下一篇： 颛顼到底是历史人物还是神话？真相是什么

推荐阅读