jquery学习笔记-编写选项卡(最基础简单方案)

最新推荐文章于 2021-04-04 17:58:09 发布

Duoer_z

最新推荐文章于 2021-04-04 17:58:09 发布

阅读量302

点赞数 1

本文链接：https://blog.csdn.net/Duoer_z/article/details/72801880

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery1</title>
	<style>
	#div1 div { width: 200px; height: 200px; border: 1px solid #ccc; display: none; }
	.block { display: block!important; }
	.none { display: none!important; }
	.active { background: red; }
	</style>
</head>
<body>
	<div id="div1">
		<input class="active" type="button" value="1">
		<input type="button" value="2">
		<input type="button" value="3">
		<div class="block">111</div>
		<div>222</div>
		<div>333</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script text="text/javascript">
		$(function(){
			$("#div1").find("input").click(function(){
				$("#div1").find("input").attr("class", " ");
				$("#div1").find("div").attr("class", "none");
				$(this).attr("class", "active");
				$("#div1").find("div").eq($(this).index()).attr("class", "block");
			});
		});
	</script>
</body>
</html>