Html
    Css
    Js
a {
	text-decoration:none;
}
.bottomNav {
	/*border:1px solid red;
	*/
    width:100%;
	height:52px;
	position:fixed;
	bottom:1px;
	background-color:#f7f7fa;
}
.bottomNav_item {
	/*border:1px solid red;
	*/
    width:25%;
	height:50px;
	float:left;
	text-align:center;
}
.bottomNav_icon {
	margin:auto;
	width:30px;
	height:30px;
}
.bottomNav_icon img {
	width:100%;
	height:100%;
}
.bottomNav_item p {
	margin-top:3px;
	color:gray;
}
.gray {
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
	filter:gray;
}
.inital_color {
	background-color:blue;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

微信底部变色导航

<p align="center">实现微信固定底部导航,
导航栏图标背景颜色随点击发生变化

0