Navbar,顶部 tab,当需要在页面顶部展示 tab 导航时使用,用法与 Tabbar 类似。
![image](https://cloud.githubusercontent.com/assets/4652816/13284130/41649ffc-db2d-11e5-8872-319be7424b34.png)
`.weui-navbar` 通常作为 `.weui-tab` 子元素、`.weui-tab__panel` 的兄弟元素一起使用。结构为:
```html
<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>Page 1</div>
<div style="display:none">Page 2</div>
<div style="display:none">Page 3</div>
</div>
</div>
```
`.weui-tab` 作为外层容器,高度撑满它的父容器的高度,`.weui-tab__panel` 作为 tab 的主体内容,占据除了 `.weui-navbar` 以外的全部父容器的高度,`.weui-navbar` 则为底部的导航栏。而 `.weui-navbar__item` 为 `.weui-navbar` 的子元素,表示一个导航区,建议不超过 5 个。
另外,需要给当前激活的 `.weui-navbar__item` 元素添加 `.weui-bar__item_on` 类,来标示当前高亮的条目。