首页 jquery正文

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

启明SEO jquery 2022-01-05 15:53:20 1042 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()
			});


评论

启明SEO微信

有什么问题欢迎添加微信咨询

好文推荐

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

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

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

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

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

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

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

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

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

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

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

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

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

修改浏览指纹的方法其实也是很简单,主要使用到......

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

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

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