本文共 2154 字，大约阅读时间需要 7 分钟。
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css"/></head><body><header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">聊天室</h1></header><nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="chat.html"> <span class="mui-icon mui-icon-chat"></span> <span class="mui-tab-label">消息</span> </a> <a class="mui-tab-item" href="contact.html"> <span class="mui-icon mui-icon-contact"></span> <span class="mui-tab-label">通讯录</span> </a> <a class="mui-tab-item" href="setting.html"> <span class="mui-icon mui-icon-settings"></span> <span class="mui-tab-label">设置</span> </a></nav><div class="mui-content"> <p class="username"></p> <p class="password"></p></div><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> mui.init(); var Index = 0; var subpages = ['chat.html','contact.html','setting.html']; 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],{top:'45px',bottom:'50px'}); if(i != Index){ sub.hide(); } self.append(sub); } }); //当前激活选项 var activeTab = subpages[Index],title=document.querySelector(".mui-title"); //选项卡点击事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { //获取目标子页的id var targetTab = this.getAttribute('href'); if (targetTab == activeTab) { return; } //更换标题 title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; //显示目标选项卡 plus.webview.show(targetTab); //隐藏当前选项卡 plus.webview.hide(activeTab); //更改当前活跃的选项卡 activeTab = targetTab; });转载地址：http://oadwz.baihongyu.com/