jQuery效果 - 隐藏和显示

最新推荐文章于 2023-01-08 21:05:42 发布

AllenWalker1936

最新推荐文章于 2023-01-08 21:05:42 发布

阅读量219

点赞数

分类专栏： jQuery jQuery效果

本文链接：https://blog.csdn.net/AllenWalker1936/article/details/88867077

版权

jQuery 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jQuery效果

7 篇文章 0 订阅

订阅专栏

jQuery效果 - 隐藏和显示

方法

hide()
show()
toggle()

语法

$(selector).hide(speed,callback);//隐藏
$(selector).show(speed,callback);//显示
$(selector).toggle(speed,callback);//隐藏与显示切换

代码

<!doctype html>
<html>
 <head>
  <title>jq隐藏与显示</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#hide").click(function(){
				$("#p1").hide("slow");
			});
			$("#show").click(function(){
				$("#p1").show("fast");
			});
			$("#hide1").click(function(){
				$("p").hide();
			});
			$("#show1").click(function(){
				$("p").show();
			});
			$("#toggle").click(function(){
				$("p").toggle("233");
			});
		});
	</script>
 </head>
 <body>
	<input type="button" id="hide" value="慢慢隐藏1" "">
	<input type="button" id="hide1" value="全部隐藏" "">
	<input type="button" id="show" value="快速显示1" "">
	<input type="button" id="show1" value="全部显示" "">
	<input type="button" id="toggle"value="切换" "">
	<p id="p1">hello world!</p>
	<p>hello world1!</p>
	<p>hello world2!</p>
 </body>
</html>

AllenWalker1936

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果 - 隐藏和显示

jQuery效果 - 隐藏和显示代码<!doctype html><html> <head> <title>jq隐藏与显示</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> &...
复制链接

扫一扫