jq实现简单选项卡

最新推荐文章于 2019-11-12 10:45:50 发布

爱学习的小兔子

最新推荐文章于 2019-11-12 10:45:50 发布

阅读量539

点赞数 1

分类专栏： jquery 文章标签： jq 选项卡

本文链接：https://blog.csdn.net/chenzs12345/article/details/78766077

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq选项卡</title>
	<style type="text/css">
		.main{width: 1000px;margin: 0 auto}
		.box{border: 1px solid #ccc;width: 800px;height: 400px;display: none;}
		.active{display: block}
		.ac{background: red;}
	</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
	<div class="main">
		<input type="button" value="1" class="ac">
		<input type="button" value="2">
		<input type="button" value="3">
		<div class="box active">1111</div>
		<div class="box">2222</div>
		<div class="box">3333</div>
	</div>
</body>
</html>
<script type="text/javascript">
$(function(){
	$('.main').find('input').click(function(){
		$('.main').find('input').attr('class','');//清空按钮CLASS
		$(this).attr('class','ac');//添加CLASS使其背景变成红色
		$('.main').find('.box').eq($(this).index()).css('display','block').siblings('.box').css('display','none');//找到相对应按钮的下标的box使其显示，隐藏兄弟元素。
	})
})
</script>

爱学习的小兔子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
jq实现简单选项卡

jq选项卡 .main{width: 1000px;margin: 0 auto} .box{border: 1px solid #ccc;width: 800px;height: 400px;display: none;} .active{display: block} .ac{background: red;} 1111 2222
复制链接

扫一扫