jQ实现tab切换效果

最新推荐文章于 2024-09-22 14:11:19 发布

西风XF

最新推荐文章于 2024-09-22 14:11:19 发布

阅读量5k

点赞数 5

分类专栏： js jQuery 文章标签： js jQuery tab切换

本文链接：https://blog.csdn.net/qq_36242361/article/details/73608734

版权

js 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

jQuery

9 篇文章 2 订阅

订阅专栏

实现效果：不同导航对应切换到不同的区域

思路：

导航一般用ul列表，对应区域用div,这样实现比较方便；

导航高亮的时候，其他兄弟li标签的样式为默认样式；

高亮导航对应区域div显示（display:block;）的时候，其他兄弟div标签为隐藏（display:none;）;

ul的子元素li个数的个数应该和.oDiv下面的div个数相同，且一一对应；

知识点：

$(this).index();//获取li的下标（$(this)谁调用就会指向谁，否则就是指向windows）

eq(1);//jQuery里面的方法，选择第一个

addClass();//给元素添加class名

siblings();//表示选中除了自己其他的兄弟标签

removeClass();//移除元素的class名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.oUl{
				overflow: auto;
				zoom: 1;
				margin-bottom:10px;
			}
			.oUl li{
				cursor: pointer;
				float: left;
				height:20px;
				width:20px;
				padding: 10px;
				margin-right:10px;
				background-color: gray;
			}
			.oUl li.active{
				color: red;
			}
			.oDiv{
				height:200px;
				width:200px;
				border: 1px solid #000;
			}
			.oDiv div{
				display: none;
			}
			.oDiv div.active{
				display: block;
			}
		</style>
	</head>
	<body>
		<ul class="oUl">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div class="oDiv">
			<div class="one active">
				one
			</div>
			<div class="two">
				two
			</div>
			<div class="three">
				three
			</div>
		</div>
	</body>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(".oUl li").on("click",function(){
			var i = $(this).index();//获取li的下标
			$(".oUl li").eq(i).addClass("active").siblings().removeClass("active");
			$(".oDiv>div").eq(i).addClass("active").siblings().removeClass("active");
		});
	</script>
</html>

写的样式略丑陋，请自行修改自己需要的样式，tab切换功能思路相同。