图标获取:
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>
手机底部导航栏
最新推荐文章于 2021-05-25 15:49:36 发布