Tabbar
tabbar，底部导航，通常用作 Web 应用的主界面底部导航，类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。
.weui_tabbar 通常作为 .weui_tab 子元素、.weui_tab_bd 的兄弟元素一起使用。结构为：
<div class="weui_tab">
<div class="weui_tab_bd">
</div>
<div class="weui_tabbar">
</div>
</div>.weui_tab 作为外层容器，高度撑满它的父容器的高度，.weui_tab_bd 作为 tab 的主体内容，占据除了 .weui_tabbar 以外的全部父容器的高度，.weui_tabbar 则为底部的导航栏。而 .weui_tabbar_item 为 .weui_tabbar 的子元素，表示一个导航区，建议不超过 5 个。
图标 .weui_tabbar_icon 约定尺寸为 24px * 24px ，二倍即 48px * 48px。
关于 active 态，开发者根据需要，给当前激活的 .weui_tabbar_item 添加标示的 .weui_bar_item_on 类名，然后控制文字颜色和图标变化。
完整的组件代码如下：
<div class="weui_tab">
<div class="weui_tab_bd">
</div>
<div class="weui_tabbar">
<a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
<div class="weui_tabbar_icon">
<img src="path/to/images/icon_nav_button.png" alt="">
</div>
<p class="weui_tabbar_label">微信</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="path/to/images/icon_nav_msg.png" alt="">
</div>
<p class="weui_tabbar_label">通讯录</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="path/to/images/icon_nav_article.png" alt="">
</div>
<p class="weui_tabbar_label">发现</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="path/to/images/icon_nav_cell.png" alt="">
</div>
<p class="weui_tabbar_label">我</p>
</a>
</div>
</div>注意： tabbar 组件是从 v0.4.0 开始加入的，更旧的版本不包含该组件，请使用 v0.4.0 及以上版本的 WeUI。