底部导航 · mui

![](https://box.kancloud.cn/2016-07-18_578cde9248241.png) html代码 ~~~ <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="index.html">  首页 </a> <a class="mui-tab-item" href="service.html">  服务 </a> <a class="mui-tab-item" href="faxian.html">  发现 </a> <a class="mui-tab-item" href="me.html">  我的 </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> ~~~