tab的两种使用方式:   navbar 和 tabbar

1.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_bd"></div>
 </div>

效果图：

2.tabbar:

代码：

<div class="weui-tabbar">
   <a href="javascript:void(0);" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
          <i class="iconfont icon-qiandao"></i>
      </div>
      <p class="weui-tabbar__label">
           <span>签到</span>
      </p>   </a>
   <a href="javascript:void(0);" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
            <i class="iconfont icon-words2"></i>
      </div>
      <p class="weui-tabbar__label">
           <span>单词</span>
      </p>   </a>
   <a href="javascript:void(0);" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
            <i class="iconfont icon-insert_tag_field"></i>
      </div>
      <p class="weui-tabbar__label">
           <span>上机</span>
      </p>   </a>
   <a href="javascript:void(0);" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
           <i class="iconfont icon-kaoshi"></i>
      </div>
      <p class="weui-tabbar__label">
         <span>测试</span>
      </p>   </a>
   <a href="javascript:void(0);" class="weui-tabbar__item">
      <div class="weui-tabbar__icon vux-reddot">
           <i class="iconfont icon-gengduo"></i>
      </div>
      <p class="weui-tabbar__label">
           <span>更多</span>
      </p>   
   </a>
</div>

效果图

ps：weui_bar_item_on 为选中项