【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')
})