【H5】底部tabbar按钮切换图标高亮显示

html

<div class="notice_bottom_tabbarBoxs">
					
	<div class="notice_bottom_tabbarBoxs_itemBoxs" img='img/sicon1.png' data-img='img/sicon01.png'>
	    <img class="notice_bottom_tabbarBoxs_itemimgBoxs1  notice_bottom_tabbarBoxs_itemimgBoxs" src="img/sicon01.png"/>
	    <div class="notice_bottom_tabbarBoxs_itemtxt notice_bottom_tabbarBoxs_itemtxtactive">医学术</div>
	</div>
	<div class="notice_bottom_tabbarBoxs_itemBoxs" img='img/sicon2.png' data-img='img/sicon02.png'>
		<img class="notice_bottom_tabbarBoxs_itemimgBoxs2 notice_bottom_tabbarBoxs_itemimgBoxs" src="img/sicon2.png"/>
		<div class="notice_bottom_tabbarBoxs_itemtxt">会议</div>
	</div>
	<div class="notice_bottom_tabbarBoxs_itemBoxs" img='img/sicon3.png' data-img='img/sicon03.png'>
		<img class="notice_bottom_tabbarBoxs_itemimgBoxs3 notice_bottom_tabbarBoxs_itemimgBoxs" src="img/sicon3.png"/>
		<div class="notice_bottom_tabbarBoxs_itemtxt">文章</div>
	</div>
	<div class="notice_bottom_tabbarBoxs_itemBoxs" img='img/sicon4.png' data-img='img/sicon04.png'>
		<img class="notice_bottom_tabbarBoxs_itemimgBoxs4 notice_bottom_tabbarBoxs_itemimgBoxs" src="img/sicon4.png"/>
		<div class="notice_bottom_tabbarBoxs_itemtxt">文章库</div>
	</div>
	<div class="notice_bottom_tabbarBoxs_itemBoxs" img='img/sicon5.png' data-img='img/sicon05.png'>
		<img class="notice_bottom_tabbarBoxs_itemimgBoxs5 notice_bottom_tabbarBoxs_itemimgBoxs" src="img/sicon5.png"/>
		<div class="notice_bottom_tabbarBoxs_itemtxt">医生</div>
	</div>
	<div class="notice_bottom_tabbarBoxs_itemBoxs" img='img/sicon6.png' data-img='img/sicon06.png'>
		<img class="notice_bottom_tabbarBoxs_itemimgBoxs6 notice_bottom_tabbarBoxs_itemimgBoxs" src="img/sicon6.png"/>
		<div class="notice_bottom_tabbarBoxs_itemtxt">我的</div>
	</div>
					
</div>

css

.notice_bottom_tabbarBoxs{
	width: 100%;
	height: 0.5rem;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: -webkit-Box;
	display: -webkit-flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	padding: 0.07rem 0 0.08rem;
	Box-sizing: border-Box;
	-webkit-Box-sizing: border-Box;
}
.notice_bottom_tabbarBoxs_itemBoxs{
	-webkit-Box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	width: 100%;
	display: -webkit-Box;
	display: -webkit-flex;
	flex-direction: column;
	align-items: center;
}
.notice_bottom_tabbarBoxs_itemimgBoxs{
	width: 0.22rem;
	height: 0.19rem;
}
.notice_bottom_tabbarBoxs_itemimgBoxs2{
	width: 0.23rem;
	height: 0.20rem;
}
.notice_bottom_tabbarBoxs_itemimgBoxs3{
	width: 0.16rem;
	height: 0.18rem;
}
.notice_bottom_tabbarBoxs_itemimgBoxs4{
	width: 0.25rem;
	height: 0.20rem;
}
.notice_bottom_tabbarBoxs_itemimgBoxs5{
	width: 0.15rem;
	height: 0.18rem;
}
.notice_bottom_tabbarBoxs_itemimgBoxs6{
	width: 0.15rem;
	height: 0.18rem;
}
.notice_bottom_tabbarBoxs_itemtxt{
	font-size: 0.12rem;
	color: #999999;
	margin-top: 0.05rem;
}
.notice_bottom_tabbarBoxs_itemtxtactive{
	color: #2397f9;
}

js

//底部按钮切换
$('.notice_bottom_tabbarBoxs_itemBoxs').click(function(ev){
	var click = $(this).data('img');
	$(this).find('.notice_bottom_tabbarBoxs_itemimgBoxs').attr('src',click);
	$(this).siblings('.notice_bottom_tabbarBoxs_itemBoxs').each(function() {
            var noclick = $(this).attr('img');
            $(this).find('img').attr('src', noclick);
        })		                  
 $('.notice_bottom_tabbarBoxs_itemBoxs').find('.notice_bottom_tabbarBoxs_itemtxt').removeClass('notice_bottom_tabbarBoxs_itemtxtactive')
			 
 $(this).find('.notice_bottom_tabbarBoxs_itemtxt').addClass('notice_bottom_tabbarBoxs_itemtxtactive')
})