IT源码网

JS点击隐藏显示相应标签

leader 2019年12月30日 Web前端 669 0

点击循环控制标签的显示与隐藏,jquery中的toggle标签很容易就能做到这点

但各个版本支持条件不同,难免会出些意外,公司的架构对jquery做了一些修改,反正是不支持这玩意

那就自己生搬硬套一个js的方法喽,如下所示:

 

<!DOCTYPE html> 
<html> 
 
	<head> 
		<meta charset="UTF-8"> 
		<title></title> 
		<script> 
			function showhidediv(id) { 
				var sbtitle = document.getElementById(id); 
				if(sbtitle) { 
					if(sbtitle.style.display == 'block'|| sbtitle.style.display == '') { 
						sbtitle.style.display = 'none'; 
					} else { 
						sbtitle.style.display = 'block'; 
					} 
				} 
			} 
			 
			function showhide(){ 
				showhidediv("aaaa"); 
				showhidediv("bbbb"); 
			} 
		</script> 
	</head> 
	<body> 
		<input type="button" onclick="showhide();" value="点击切换状态"/> 
		<h1 id="aaaa" >所以那些可能都不是真的</h1> 
		<h1 id="bbbb" style="display: none;">你才不是一个没有故事的女同学</h1> 
	</body> 
 
</html> 

  

评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!