jquery Tab选项卡切换

大数据同盟会

已于 2022-04-19 13:48:09 修改

阅读量1.6k

点赞数

分类专栏： JAVA实战文章标签： jquery

于 2020-01-09 09:42:32 首次发布

本文链接：https://blog.csdn.net/chuan129/article/details/103902051

版权

JAVA实战专栏收录该内容

29 篇文章 7 订阅

订阅专栏

代码如下：

<!DOCTYPE html><html lang="en" dir="ltr">
<head><meta charset="utf-8"><title>Tab简单的选项卡切换</title></head>
	
	<style type="text/css">
	*{margin:0px;padding:0px;}
	.tabbox{margin:10px;}
	.tabbox ul{list-style:none;display:table;}
	.tabbox ul li{float:left;width:100px;line-height:30px;padding-left:8px;border:1px solid #aaccff;margin-right:-1px;cursor:pointer;}
	.tabbox ul li.active{background-color:#e73839;color:white;font-weight:bold;}
	.tabbox .content{border:1px solid #aaccff;padding:10px;}
	.tabbox .content>div{display:none;}
	.tabbox .content>div.active{display:block;}
	</style>
	
	
	<body>
	
	<body>
	
	<div class="tabbox">
	　　<ul>
	　　　　<lis>选项卡一</li>
	　　　　<li class="active">选项卡二</li>
	　　　　<li>选项卡三</li>
	　　　　<li>选项卡四</li>
	　　</ul>
	<div class="content">
	　　<div>
	　　　　<div>111111111111</div>
	　　</div>
	<div class="active">
	　　<div>2222222222</div>
	</div>
	　　<div>33333333333</div>
	　　　　<div>44444444</div>
	　　</div>
	</div>
	
	<div class="tabbox">
	　　<ul>
	　　　　<li>选项卡一</li>
	　　　　<li class="active">选项卡二</li>
	　　　　<li>选项卡三</li>
	　　　　<li>选项卡四</li>
	　　</ul>
	<div class="content">
	　　<div>
	　　　　<div>555555555</div>
	　　</div>
	<div class="active">
	　　<div>66666666666</div>
	</div>
	　　<div>7777777777777</div>
	　　<div>8888888888888</div>
	　　</div>
	</div>
	</body>
					  
    </body>
</html>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
		$(function ()
		{
		　　$(".tabbox li").click(function ()
		　　{
		　　　　//获取点击的元素给其添加样式，讲其兄弟元素的样式移除
		　　　　$(this).addClass("active").siblings().removeClass("active");
		　　　　//获取选中元素的下标
		　　　　var index = $(this).index();
		　　　　$(this).parent().siblings().children().eq(index).addClass("active")
		　　　　.siblings().removeClass("active");
		　　});
		});
	
</script>

效果如下：
在这里插入图片描述