手机底部导航栏

最新推荐文章于 2023-03-30 21:01:14 发布

allWords

最新推荐文章于 2023-03-30 21:01:14 发布

阅读量1.1k

点赞数

分类专栏： ui html js 文章标签： jquery 手机底部导航栏怎么固定如何解决手机端导航栏不随页面固定 rem 在Jquery里怎样得到其父下对应的子类

本文链接：https://blog.csdn.net/allWords/article/details/79225006

版权

ui 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

8 篇文章 1 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

图标获取：
http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

代码如下：
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<script type="text/javascript" src='jquery.min.js'></script>
	<style>
		*{
			margin:0;
			padding:0;
			font-family:微软雅黑;
		}
		ul{
			list-style:none;
		}
		#content{
			position:fixed;
			bottom:0;
			left:0;
			width:100%;
			height:4rem;
			box-shadow:0 0 1rem #222;
		}
		#content ul{
			display:flex;
			flex-wrap:wrap;
			justify-content:space-around;
			align-items:center;
			width:100%;
			height:100%;
		}
		#content ul li{
			width:25%;
			height:4rem;
			text-align:center;
		}
		#content ul li img{
			margin-top:0.8rem;
			width:1.5rem;
			height:1.5rem;
			line-height:3rem;
		}
		#content ul li p{
			font-size:0.8rem;
		}

		.bottomBackground{
			color:#fc6;
		}
	</style>
</head>
<body>
	<div id="content">
		<ul>
			<li class='bottom-li'>				
				<img src="b1.png" width='200' height='200' alt="">
				<p>主页</p>
			</li>
			<li class='bottom-li'>
				<img src="a2.png" width='358' height='131' alt="">
				<p>主页</p>
			</li>
			<li class='bottom-li'>
				<img src="1.webp" width='358' height='131' alt="">
				<p>主页</p>
			</li>
			<li class='bottom-li'>
				<img src="1.webp" width='358' height='131' alt="">
				<p>主页</p>
			</li>
		</ul>
	</div>
</body>
<script>

	//var num1=$("ul > a:eq(0)").attr("ID");
	//var num2=$("ul").children("a:eq(0)").attr("ID");
	//var num3=$("ul").find("a:eq(0)").attr("ID");

	//点击bottom-li
	$('.bottom-li').click(function(){
		//这个被点击的bottom-li加上这个类
		$(this).addClass('bottomBackground');
		//bottom-li不包含被点击的这个的都去掉bottomBackground这个类
		$('.bottom-li').not($(this)).removeClass('bottomBackground');
		//被点击的这个在bottom-li中是第几个
		var idx = $(this).index('.bottom-li');

		//如果被点击的这个是第一个的话,则改变第一个图片
		if(idx == 0){
			$(this).find('img').attr('src','b2.png');
		}else{
			$('.bottom-li').eq(0).find('img').attr('src','b1.png');
		}

		if(idx == 1){
			$(this).find('img').attr('src','a1.png');
		}else{
			$('.bottom-li').eq(1).find('img').attr('src','a2.png');
		}		
	});
</script>
</html>

allWords

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
手机底部导航栏

图标获取：http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2代码如下： Document *{ margin:0; padding:0; font-family:微软雅黑; } ul{ list-style:none; } #content
复制链接

扫一扫