使用jQuery显示隐藏内容

最新推荐文章于 2024-07-25 09:24:40 发布

晓姌

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量507

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/liuyan11223/article/details/125650780

版权

html5代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="css/global(1).css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="lib/jquery-3.6.0.js"></script>
	</head>
	<body>
		<div>
			<ul>
				<li>
					<h1>林徽因简介</h1>
				</li>
				<li>
					林徽因，女，汉族，原名林微音，出生于浙江杭州， 祖籍福建福州。中国著名建筑家、诗人、作家。人民英雄 纪念碑和中华人民共和国国徽深化方案的设计者
					林徽因是建筑师梁思成的第一任妻子。三十年代初 与夫婿梁思成用现代科学方法研究方法研宄中国古代建 筑，成为这个学术领域的开拓者。
				</li>
				<li><h1>主要作品</h1></li>
				<li>
					<p>《你是人间四月天》</p>
					<p>《宝莲灯》</p>
					<p>《九十九度中》</p>
				</li>
			</ul>
		</div>
		<script src="js/index.js"></script>
	</body>
</html>

将已定义的内容隐藏:

div {
	width: 200px;
	margin: 30px auto;
}
ul li:nth-child(1) {
	background-color: #333333;
	color: #fff;
	height: 50px;
	cursor: pointer;
}
h1 {
	text-align: center;
	font-size: 25px;
	line-height: 50px;
}
ul li:nth-child(2) {
	line-height: 20px;
	font-weight: 700;
	display: none;
}
ul li:nth-child(3) {
	background-color: #333333;
	color: #fff;
	height: 50px;
	cursor: pointer;
}
ul li:nth-child(4) p {
	line-height: 20px;
	display: none;
}

jQuery代码将隐藏部分显示：

$(document).ready(function () {
	$("ul li:nth-child(1)").click(function () {
		$("ul li:nth-child(2)").css({ display: "block" });
		$("ul li:nth-child(4) p").css({ display: "none" });
	});
	$("ul li:nth-child(3)").click(function () {
		$("ul li:nth-child(4) p").css({ display: "block" });
		$("ul li:nth-child(2)").css({ display: "none" });
	});
});