关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。
文章所需资源链接：
百度网盘链接：
https://pan.baidu.com/s/1zd58HBQurQeDhEtx74ROmg
提取码：6e6u
百度网盘地址二维码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*整体做rem适配，100px相当于1rem*/
html{font-size:13.33333333vw}
/*全局css样式配置*/
*{
padding: 0;
margin: 0;
}
.box_center{
width: 100%;
height: 1rem;
margin-top: 0.1rem;
border-bottom: 0.01rem solid #ccc;
/*position: fixed;
top: 0.6rem;
left: 0;
z-index: 30;*/
background-color: #fff;
}
.box_center .pagination{
width:100%;
height: 100%;
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.box_center .pagination li{
width: 18%;
height: 100%;
list-style: none;
font-size: 0.2rem;
text-align: center;
line-height: 1rem;
font-size: 0.32rem;
color:#3f3f3f;
}
.box_center .pagination .selected{
color:#3388FF;
}
</style>
</head>
<body>
<!--搜索框tab切换-->
<div class="box_center">
<ul class="pagination">
<li class="selected">全部</li>
<li>课程</li>
<li>节目</li>
<li>魔友</li>
<li>片段</li>
</ul>
</div>
<ul id="contents">
<li class="show">全部内容</li>
<li>课程内容</li>
<li>节目内容</li>
<li>魔友内容</li>
<li>片段内容</li>
</ul>
<script src="jquery-1.12.3.min.js"></script>
<script>
$('#contents li').eq(0).show().siblings().hide();
$('.pagination li').click(function() {
var i = $(this).index();//下标第一种写法
//var i = $('.pagination').index(this);//下标第二种写法
$(this).addClass('selected').siblings().removeClass('selected');
$('#contents li').eq(i).show().siblings().hide();
});
</script>
</body>
</html>
总结
以上所述是我给大家介绍的Tab切换效果（js实现），希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的。转载请附上源码地址!
作者微信：欢迎大家交流
7181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
