这里介绍一下,WeUI里面两个导航栏Navbar和Tabbar。

Navbar

<!---------------顶部导航--------------->
<div class="weui-tab">
	<div class="weui-navbar">
		<div class="weui-navbar__item weui-bar__item_on">
			选项一
		</div>
		<div class="weui-navbar__item">
			选项二
		</div>
		<div class="weui-navbar__item">
			选项三
		</div>
	</div>
        <div class="weui-tab__panel">
          <!---------------内容--------------->
	</div>
</div>
/*-------------顶部导航js-------------*/
$(function() {
	$('.weui-navbar__item').on('click', function() {
		$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
	});
});
<!---------------底部导航--------------->
<div class="weui-tab">
	<div class="weui-tab__panel">
             <!---------------内容--------------->
	</div>
	<div class="weui-tabbar">
		<a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
			<span style="display: inline-block;position: relative;">
                        <img src="example/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
			</span>
			<p class="weui-tabbar__label">微信</p>
		</a>
		<a href="javascript:;" class="weui-tabbar__item">
			<img src="example/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
			<p class="weui-tabbar__label">通讯录</p>
		</a>
		<a href="javascript:;" class="weui-tabbar__item">
			<span style="display: inline-block;position: relative;">
                        <img src="example/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
			</span>
			<p class="weui-tabbar__label">发现</p>
		</a>
		<a href="javascript:;" class="weui-tabbar__item">
			<img src="example/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
			<p class="weui-tabbar__label">我</p>
		</a>
	</div>
</div>

/*----------底部导航js----------*/
$(function() {
	$('.weui-tabbar__item').on('click', function() {
		$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
	});
});