高防服务器

jquery如何让一个div隐藏和显示


jquery如何让一个div隐藏和显示

发布时间:2022-06-16 10:09:51 来源:高防服务器网 阅读:88 作者:iii 栏目:web开发

这篇文章主要讲解了“jquery如何让一个div隐藏和显示”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何让一个div隐藏和显示”吧!

3种实现方法:1、使用toggle(),语法“$("div").toggle();”,可检查div元素的可见状态,如果元素是可见的则隐藏该元素,如果元素是隐藏的则显示该元素。2、使用fadeToggle()进行显隐切换,语法“$("div").fadeToggle();”。3、使用slideToggle()进行显隐切换,语法“$("div").slideToggle();”。

本教程操作环境:windows7系统、jquery3.6.0版本、Dell G3电脑。

jquery隐藏和显示div元素的三种方法

1、使用toggle()来隐藏和显示div元素

toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。

  • hide() 方法隐藏被选元素。

  • show() 方法显示隐藏的被选元素。

该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 show(),如果一个元素是可见的,则运行 hide() – 这会造成一种隐藏和显示状态切换的效果。

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<script src="./js/jquery-3.6.0.min.js"></script>  		<script>  			$(document).ready(function() {  				$("button").click(function() {  					$("div").toggle();  				});  			});  		</script>  		<style>  			p,div,span {  				background-color: #FFC0CB;  			}  		</style>  	</head>  	<body>  		<p>p元素</p>  		<div>div元素</div>  		<span>span元素</span><br><br>  		<button>隐藏和显示div元素</button>    	</body>  </html>

2、使用fadeToggle()来隐藏和显示div元素

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

  • 如果元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。

  • 如果元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。

<script src="./js/jquery-3.6.0.min.js"></script>  <script>  	$(document).ready(function() {  		$("button").click(function() {  			$("div").fadeToggle();  		});  	});  </script>  <style>  	p,div,span {  		background-color: #DAA520;  	}  </style>

3、使用slideToggle() 来隐藏和显示div元素

slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。

  • slideUp() 方法以滑动方式隐藏被选元素。

  • slideDown() 方法以滑动方式显示被选元素。

该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 slideDown(),如果一个元素是可见的,则运行 slideUp() – 这会造成一种隐藏和显示状态切换的效果。

<script src="./js/jquery-3.6.0.min.js"></script>  <script>  	$(document).ready(function() {  		$("button").click(function() {  			$("div").slideToggle();  		});  	});  </script>

感谢各位的阅读,以上就是“jquery如何让一个div隐藏和显示”的内容了,经过本文的学习后,相信大家对jquery如何让一个div隐藏和显示这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是高防服务器网,小编将为大家推送更多相关知识点的文章,欢迎关注!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[