jq点击按钮切换页面(例子用底部导航栏)

<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;
}