您的位置：首页 > Web前端 > JQuery

jQuery的显示和隐藏

2019-08-12 13:21 1176 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_42625143/article/details/99296931

在 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 元素：

--------------------------------------------------------------------
注：如果你对python感兴趣，我这有个学习Python基地，里面有很多学习资料，感兴趣的+Q群：895817687
--------------------------------------------------------------------
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航