<div class="mx-tab">
<div class="mx-tab__panel">
</div>
<div class="mx-tabbar">
<a href="javascript:;" class="mx-tabbar__item mx-bar__item_on">
<span style="display: inline-block;position: relative;">
<img src="../../images/icon_tabbar.png" alt="" class="mx-tabbar__icon">
<span class="mx-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
</span>
<p class="mx-tabbar__label">微信</p>
</a>
<a href="javascript:;" class="mx-tabbar__item">
<img src="../../images/icon_tabbar.png" alt="" class="mx-tabbar__icon">
<p class="mx-tabbar__label">通讯录</p>
</a>
<a href="javascript:;" class="mx-tabbar__item">
<span style="display: inline-block;position: relative;">
<img src="../../images/icon_tabbar.png" alt="" class="mx-tabbar__icon">
<span class="mx-badge mx-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
</span>
<p class="mx-tabbar__label">发现</p>
</a>
<a href="javascript:;" class="mx-tabbar__item">
<img src="../../images/icon_tabbar.png" alt="" class="mx-tabbar__icon">
<p class="mx-tabbar__label">我</p>
</a>
</div>
</div>
<script>
$(function(){
$('.mx-tabbar__item').on('click', function () {
$(this).addClass('mx-bar__item_on').siblings('.mx-bar__item_on').removeClass('mx-bar__item_on');
});
});
</script>
