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 class="mui-tab-item" href="message.html"> <span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span> <span class="mui-tab-label">群組</span> </a> <a class="mui-tab-item" href="b.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">我的</span> </a> </nav> ``` JavaScript部分: ``` //創建子頁面 var subpages = ['a.html','message.html','b.html']; var subpage_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],subpage_style); var sub = plus.webview.create( 'a.html', 'a.html',{ top: '0px', bottom: '50px', scrollIndicator: "none" ,// 當你的界面的內容足夠多的時候，會出現滾動條，這個是隱藏滾動條 }); if(i>0){ sub.hide(); } self.append(sub); } }); //當前激活選項卡 var activeTab = subpages[0]; //選項卡點擊事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href'); if (targetTab == activeTab) { return; } //顯示目標選項卡 plus.webview.show(targetTab); //隱藏當前; plus.webview.hide(activeTab); //更改當前活躍的選項卡 activeTab = targetTab; }); //自定義事件，模擬點擊“首頁選項卡” document.addEventListener('gohome',function () { var defaultTab = document.getElementById("defaultTab"); //模擬首頁點擊 mui.trigger(defaultTab,'tap'); //切換選項卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if(defaultTab!==current){ current.classList.remove('mui-active'); defaultTab.classList.add('mui-active'); } }); ```