[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");
// 模擬首頁點擊
})
~~~
