jquery显示和隐藏切换

最新推荐文章于 2023-10-17 19:53:29 发布

xlj3

最新推荐文章于 2023-10-17 19:53:29 发布

阅读量1.2k

点赞数 1

分类专栏：前端学习回顾

本文链接：https://blog.csdn.net/luman1991/article/details/54782889

版权

前端学习回顾专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
	<style type="text/css">
		
		img{
				width:160px;
				height:200px;
				position:absolute;
				top:100px;
			}
		.right{
			right:10px;
		}
	</style>
	 <script type="text/javascript">
		$(function(){
			$('.dis').click(function(){
				$('.data').show(200);
			})
			$('.hid').click(function(){
				$('.data').hide(200);
			})
			$('.toggle').click(function(){
				$('.data').toggle(200);
			})
			$('.left,.right').click(function(){
				$('img').hide(400);
			});
		})
	 </script>
	</head>
	<body>
			<img src='C:/Users/admin/Desktop/1.jpg' alt='' class='left'/>
			<img src='C:/Users/admin/Desktop/2.jpg' alt='' class='right'/>
			<button class="dis">显示</button>
			<button class="hid">隐藏</button>
			<button class="toggle">切换</button>
			<div class="data">
			1111111111111111111111111111111
			1111111111111111111111111111111111111
			1111111111111111111111111111111111
			111111111111111111111111111111111111
			1111111111111111111111111111111111111</div>
	</body>

</html>

xlj3

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery显示和隐藏切换

img{ width:160px; height:200px; position:absolute; top:100px; } .right{ right:10px; } $(function(){ $('.dis').click(function(){ $('.data').show(200); }) $
复制链接

扫一扫