移动端底部tabbar切换

最新推荐文章于 2025-03-17 16:56:21 发布

uuai

最新推荐文章于 2025-03-17 16:56:21 发布

阅读量5.6k

点赞数 1

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_39019768/article/details/80510825

版权

javascript 专栏收录该内容

15 篇文章

订阅专栏

<!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>