JS点击隐藏显示相应标签

无情 阅读:947 2019-12-30 15:54:24 评论: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> 

  

标签:CSSJavaScript
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号