JS点击让图片自动显隐

时间：5年前阅读：5271

点击循环控制标签的显示与隐藏，jquery中的toggle标签很容易就能做到这点，但我这个用JS写的，以前学js时候做的笔记分享大家，思路：通过if来判断if (ww==1)新增加一个变量 1、对应图片的显示姿态 2、对应隐藏状态...

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script type="text/javascript">    
			window.onload = function(){    
				var dd = document.getElementById('dd');    
				var tt = document.getElementById('tt');    
				var ww =1;//新增加一个变量 1、对应图片的显示姿态     2、对应隐藏状态    
//				给按钮加单击事件    
				dd.onclick = function(){    
				if (ww==1) {//现在的状态在显示状态    
					tt.style.display='none';    
//					点进去之后,对应的ww=1变成ww=2;    
					ww=2;    
				} else if (ww==2) {//现在的状态隐藏状态    
					tt.style.display ='block';    
					ww=1;    
				}{    
				}	
    
				}    
			}    
		</script>    
	</head>    
	<body>    
		<input type="button" name="dd" id="dd" value="来点我呀！" />    
		<br /><br />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903261553589102692060.jpg" alt="" id="tt"/>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

JS点击让图片自动显隐

网友评论