HTML5的div展开与收缩

最新推荐文章于 2024-07-06 16:54:22 发布

五光十色的_團

最新推荐文章于 2024-07-06 16:54:22 发布

阅读量2.9k

点赞数 2

分类专栏： HTML 文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/weixin_47998573/article/details/125457357

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5的div展开与收缩

直接上代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>展开与收缩</title>
	</head>
	<body>
		<div>
			<div>
				你好hello
			</div>
			<div id="change" style="display:none">
				你好hi
			</div>
		</div>
		<p class="slide">
			<a href="javascript:showdiv();" id="control" class="btn-slide">展开+</a>
		</p>
		<script type="text/javascript">
			function showdiv() {
				document.getElementById("change").style.display = "block";
				document.getElementById("control").innerHTML = "收起-";
				document.getElementById("control").href = "javascript:hidediv()";
			}

			function hidediv() {
				document.getElementById("change").style.display = "none";
				document.getElementById("control").innerHTML = "展开+";
				document.getElementById("control").href = "javascript:showdiv()";
			}
		</script>
	</body>
</html>