html代碼 ~~~ <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="index.html"> <span class="mui-icon"><i class="iconfont">&#xe604;</i></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item" href="service.html"> <span class="mui-icon"><i class="iconfont">&#xe607;</i></span> <span class="mui-tab-label">服務</span> </a> <a class="mui-tab-item" href="faxian.html"> <span class="mui-icon"><i class="iconfont">&#xe609;</i></span> <span class="mui-tab-label">發現</span> </a> <a class="mui-tab-item" href="me.html"> <span class="mui-icon"><i class="iconfont">&#xe602;</i></span> <span class="mui-tab-label">我的</span> </a> </nav> ~~~ js代碼 ~~~ <script> mui.init(); var subpages = ['index.html', 'service.html', 'faxian.html', 'me.html']; var subpage_style = { top: '0px', bottom: '51px' }; //創建子頁面，首個選項卡頁面顯示，其它均隱藏； mui.plusReady(function() { var self = plus.webview.currentWebview(); for (var i = 0; i < subpages.length; i++) { var temp = {}; var sub = plus.webview.create(subpages[i], subpages[i], subpage_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.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'); } }); </script> ~~~