jquery可见性过滤器选择器的使用案例

最新推荐文章于 2024-01-25 09:15:00 发布

锅絮不是我

最新推荐文章于 2024-01-25 09:15:00 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

文章标签： html css jquery

本文链接：https://blog.csdn.net/myx20220713/article/details/126313278

本文通过一段简洁的HTML和jQuery代码示例，演示了如何利用jQuery选择器和动画效果来实现网页中多个div元素的显示与隐藏切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: aqua;
				margin-top: 10px;
			}
			#div0{
				width: 100px;
				height: 100px;
				background-color: blue;
				display: none;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div id="div0"></div>
		<input type="button" value="隐藏" id="stn1">
		<input type="button" value="显示" id="stn2">
		<script type="text/javascript">
			$(function(){
				$("#stn1").click(function(){
					$("div:visible").hide(1000)
				})
				$("#stn2").click(function(){
					$("div:hidden").show(1000)
				})
			})
		</script>
	</body>
</html>

效果图