使用Mui tabber

通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式.

• 使用场景
  这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；

• 引入mui.js
  如果不是在 HBuilder 中新建的 MUI 项目，那么需要自行下载，点我下载 JS，右键保存页面存储到项目中就可以了。

//引入 JS
<script src="js/mui.min.js"></script>

• 联动绑定
  Mui绝大多数联动，都是采用类似锚点与ID相绑定，选项卡也不例外。

<!-- 例如 -->
<a href="#id-01">选项卡名称</a>
<div id="id-01">选项卡内容</div>

• 高亮或选中状态
  Mui 统一是添加mui-active，所以如果你要默认哪个选项卡先显示，可以在其 class 上添加这个mui-active。

底部选项卡 div 模式

<!-- 底部选项卡 -->
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
        <span class="mui-tab-label">消息</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">通讯录</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>


<!-- 选项卡内容 -->
<div class="mui-content">
    <div id="tabbar" class="mui-control-content mui-active">tabbar-01</div>
    <div id="tabbar-with-chat" class="mui-control-content">tabbar-02</div>
    <div id="tabbar-with-contact" class="mui-control-content">tabbar-03</div>
    <div id="tabbar-with-map" class="mui-control-content">tabbar-04</div>
</div>

具体效果如下

顶部选项卡 div 模式

添加 DOM 结构

<!-- 选项卡头部 -->
<div style="padding: 10px 10px;">
    <div id="segmentedControl" class="mui-segmented-control">
        <a class="mui-control-item mui-active" href="#item1">选项卡 1</a>
        <a class="mui-control-item" href="#item2">选项卡 2</a>
        <a class="mui-control-item" href="#item3">选项卡 3</a>
    </div>
</div>

<!-- 选项卡内容 -->
<div class="tabBox">
    <div id="item1" class="mui-control-content mui-active">item1</div>
    <div id="item2" class="mui-control-content">item2</div>
    <div id="item3" class="mui-control-content">item3</div>
</div>

具体效果如下