Date:2018/11/18

用toggle,点击一下可以显示或者隐藏图片,回顾style和script的一些属性用法

效果图:

javaEE (五)javaweb_jQuery (2) toggle切换显示/隐藏状态

源代码:

<!-- 
1、style里面:margin: auto;text-align: center;
2、是click不是onclick !!!!
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 0px solid red;
				width: 500px;
				height: 500px;
				margin: auto;
				text-align: center;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script>
			$(function(){
				$("#btn").click(function(){   //是click不是onclick啊!!!!
					$("#img1").toggle();
				});
			});
		</script>
		
		
	</head>
	
	<body>
		<div id="div1">

		<input type="button" value="点击/隐藏" id="btn"  /><br />
		<br />
		<img src="img/middle01.jpg" id="img1" />
		
		</div>
	</body>
</html>

相关文章: