js-实现点击显示与隐藏

最新推荐文章于 2024-06-28 22:39:15 发布

HadwinLing

最新推荐文章于 2024-06-28 22:39:15 发布

阅读量678

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Alingyuzi/article/details/105151013

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

html部分

<div id="box">
	<div >账户余额&nbsp;&nbsp;&nbsp;&nbsp;<em id="box_title" style="font-size: 12px">显示余额</em></div>
<div id="box_content" style="display: none">￥<em>1999</em></div>
</div>

js部分

<script type="text/javascript">
	window.onload = function(){
		document.querySelector("#box_title").addEventListener("click",function(){
			var o = document.querySelector("#box_content")
			if(o.className == '') {
				o.style.display = 'block';
				o.className = 'active';
			}else{
				o.style.display = 'none';
				o.className = '';
			}
		},false);
	}
</script>