jquery实现tab分页

小小白号

于 2020-11-10 19:49:34 发布

阅读量290

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/WiseGirls/article/details/109605797

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今日小案例

01.tab分页

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.a{
			background-color: red;
		}
		.div{
			display: none;
		}
		.b{
			display: block;
		}
	</style>
	<script src="jquery.min.js"></script>
</head>
<body>
	<input type="button" class="btn" value="按钮1"/>
	<input type="button" class="btn" value="按钮2"/>
	<input type="button" class="btn" value="按钮3"/>
	<div id="content">
	<div class="div">按钮1的内容</div>
	<div class="div">按钮2的内容</div>
	<div class="div">按钮3的内容</div>
	</div>
</body>
<script type="text/javascript">
	$(".btn").click(function(){
		$(this).addClass("a").siblings().removeClass("a");
		var index=$(this).index();
		$(".div").eq(index).addClass("b").siblings().removeClass("b");
	})
</script>
</html>