版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39019768/article/details/80510825
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>底部tabbar切换</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.foot {
width: 100%;
height: 60px;
background: #FFFFFF;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-around;
}
.foot li {
height: 100%;
}
.foot li a {
display: block;
width: 100%;
height: 100%;
}
.foot li a img {
display: block;
width: 38px;
height: 38px;
}
.foot li a p {
font-size: 12px;
width: 100%;
text-align: center;
}
p.actives {
color: #35bed1;
}
</style>
</head>
<body>
<!--img为未选中图片 data-img为选中图片-->
<ul class="foot">
<li class="Imgbox" img="images/home-icon.png" data-img="images/home-icon2.png">
<a href="##">
<img src="images/home-icon2.png" />
<p class="actives">首页</p>
</a>
</li>
<li class="Imgbox" img="images/study-icon.png" data-img="images/study-icon2.png">
<a href="##">
<img src="images/study-icon.png" />
<p>学习</p>
</a>
</li>
<li class="Imgbox" img="images/my-icon.png" data-img="images/my-icon2.png">
<a href="##">
<img src="images/my-icon.png" />
<p>我的</p>
</a>
</li>
</ul>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('.foot li').click(function() {
$(this).find("p").addClass('actives');
$(this).siblings(".Imgbox").find("p").removeClass('actives');
var click = $(this).data('img');
$(this).find('img').attr('src', click);
$(this).siblings('.Imgbox').each(function() {
var noclick = $(this).attr('img');
$(this).find('img').attr('src', noclick);
})
})
</script>
</html>