<div id="content"></div>
<footer class="footer1 ft1">
<a data-href="head.html" class="col-xs-3 active">
<div class="icon2">
</div>
<span>
首页
</span>
</a>
<a data-href="device.html" class="col-xs-3">
<div class="icon1">
</div>
<span>
设备数据
</span>
</a>
<a data-href="touch.html" class="col-xs-3">
<div class="icon3">
</div>
<span>
联系我们
</span>
</a>
<a data-href="me.html" class="col-xs-3">
<div class="icon4">
</div>
<span>
我的
</span>
</a>
</footer>
//js
$("#content").load("head.html")
$('.footer1').on('click', 'a', function(idx, ele) {
$('.active').removeClass('active');
$(this).addClass('active');
var href = $(this).data('href');
console.log(href)
if(!href == '' || href !== undefined) {
$('#content').load(href,function(){
});
}
});
//css
footer{
position: fixed;
bottom:0;
z-index: 3;
width: 100%;
height: 50px;
border-top: 1px solid #eee;
background: #fff;
}
.footer1 a{
display: block;
height: 100%;
text-align: center;
font-size: 1.2em;
color: #909090;
}
.footer1 a.col-xs-3{
width: 25%;
}
.footer1 a.active span{
color: #fc444c;
color: rgba(37,132,254,1);
}
.footer1 a.reset{
background: #fff;color: #333;border-top: 1px solid #dfdfdf;
}
.icon1, .icon2, .icon3, .icon4,.icon6,.store,.call{
display: block;
margin-top: 4px;
margin-bottom: -1px;
width: 100%;
height: 51%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.icon1{
background-image: url(../images/icon1.png);
}
.icon2 {
background-image: url(../images/icon25.png);
}
.icon3 {
background-image: url(../images/icon35.png);
}
.icon4 {
background-image: url(../images/icon4.png);
}
.icon6 {
background-image: url(../images/icon6.png);
}
.active .icon1{
background-image: url(../images/icon12.png);
}
.active .icon2{
background-image: url(../images/icon26.png);
}
.active .icon3{
background-image: url(../images/icon36.png);
}
.active .icon4{
background-image: url(../images/icon41.png);
}
.active .icon6{
background-image: url(../images/icon61.png);
}
footer.filter-footer {
z-index: 200;
bottom: auto;
/*top: 436px;*/
/* display: none; */
height: 40px;
line-height: 40px;
}
.ft2 a.reset {
background: #d3d9de;
color: #636363;
}
footer.ft3{
padding-top: 5px;
padding:5px 10px;
}