[TOC]
>[success] # 底部导航切换界面
<br/>
HTML部分
<br/>
~~~html
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="a.html">
<span class="mui-icon mui-icon-videocam"></span>
<span class="mui-tab-label">社区</span>
</a>
<a id="defaultTab" class="mui-tab-item mui-active" href="b.html">
<span class="mui-icon mui-icon-videocam"></span>
<span class="mui-tab-label">群组</span>
</a>
<a id="defaultTab" class="mui-tab-item mui-active" href="c.html">
<span class="mui-icon mui-icon-videocam"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
~~~
<br/>
JavaScript部分
<br/>
<br/>
<br/>
~~~
mui.init();
// 创建子页面
var subpages = ["a.html","b.html","c.html"];
var subpages_style = {
top:"0px",
bottom:"50px",
scrollIndicator:"none" // 当你界面的内容足够多的时候会出现滚动条，这个是隐藏滚动条的作用
}
// 创建子页面，首个选项卡页面显示，其他均隐藏；
mui.plusReady(function(){
var self = plus.webview.currentWebview();
for(var i=0;i<subpages.length;i++){
var sub = plus.webview.create(subpages[i],subpages[i],subpages_style)
if(i>0){
sub.hide();
}
self.append(sub);
}
})
// 当前选项卡激活
var activeTab = subpages[0];
// 选项卡点击事件
mui(".mui-bar-tab").on('tap','a',function(e){
var targetTab = this.getAttrbute('href')
if(targetTab == activeTab){
return;
}
// 显示目标选项卡
plus.webview.show(targetTab);
// 隐藏当前;
plus.webview.hide(activeTab);
// 更改当前活跃的选项卡
activeTab = targetTab;
});
// 自定义事件，模拟点击“首页选项卡”
document.addEventListener("gohome",function(){
var defaultTab = document.getElementById("defaultTab");
// 模拟首页点击
})
~~~
