首页 jquery正文

jQuery 如何让元素实现隐藏与显示的效果

启明SEO jquery 2022-01-05 15:53:20 303 0
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<script src="jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			
			$('.aa').click(function(){
						  
						  alert("ccc")
						  
						  });


  
});
	
	</script>
	<style type="text/css">
		.aa{
			width: 100px;
			height: 100px;
			background-color: #CF7B7C;
			float: left;
			
		}
	</style>
</head>

<body>
	<div class="aa">
	</div>
	<div id="bb">
	  <div></div>
		<div></div>
		<div></div>
	</div>
</body
</html>

在前面我们学习了点击事件,那么我们下面来实现点击aa元素,让其消失的效果,代码如下:

	<script type="text/javascript">
		$(function(){
			
			$('.aa').click(function(){
						  
			    $(this).hide()
						  
			});

});

点击消失后我们要让它恢复怎么办,我们给id=“bb”增加个点击事件(让class="aa"的div显示出来),我们先完善一下上面代码,完整代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<script src="jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			
			$('.aa').click(function(){
						  
						  $(this).hide()
						  
						  });
			$('#bb').click(function(){
					$('.aa').show()
			})


  
});
	
	</script>
	<style type="text/css">
		.aa{
			width: 100px;
			height: 100px;
			background-color: #CF7B7C;
			float: left;
			
		}
		#bb{
			width:50px;
			height: 50px;
			background: red;
			float: right;
		}
	</style>
</head>

<body>
	<div class="aa">
	</div>
	<div id="bb">
	  <div></div>
		<div></div>
		<div></div>
	</div>
</body
</html>

这样点击aa就会让其自己消失,在点击bb就会显示aa.

我们还可以通过toggle() 方法,让他实现,点击bb消失,再点击bb显示的效果,代码如下:

			$('#bb').click(function(){
				$('.aa').toggle()
			});


评论

好文推荐

实时访客入口页面出现bd_vid=标识是什么原因

实时访客入口页面出现bd_vid=标识是什么原因

最近查看百度实时访客,总是会看到入口页面会多......

有了微信视频号,但是没有发布权限,怎么开通

有了微信视频号,但是没有发布权限,怎么开通

视频号是微信在2020年1月19号开始内测的......

如何用python抓取爱企查企业信息

如何用python抓取爱企查企业信息

前段时间,经理让我去找一些企业的信息,我平常......

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

对于一般企业网站或者博客来说,对服务器的配置......

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

我遇到的问题是电脑原先安装过mysql,卸......

python+selenium+Chrome options参数设置详解

python+selenium+Chrome options参数设置详解

ChromeOptions常用的行为一般有......