mui 点击底部菜单，显示不同的页面
效果：
源码：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet" /><link rel="stylesheet" href="css/iconfont.css"><!-- 引入支付宝图标文件--><link rel="stylesheet" href="css/freestyle.css" /><!-- 自定义样式文件--><script type="text/javascript" charset="utf-8">mui.init();</script></head><body ><nav class="mui-bar mui-bar-tab footer"> <!-- mui菜单栏--><a class="mui-tab-item mui-active" href="home.html"><span class="mui-icon iconfont icon-qianbaopengyou"></span> <!--支付宝图标--><span class="mui-tab-label">首页</span></a><a class="mui-tab-item " href="wealth.html"><span class="mui-icon iconfont icon-caifua"></span><span class="mui-tab-label">财富</span></a><a class="mui-tab-item " href="praise.html"><span class="mui-icon iconfont icon-gouwu"></span><span class="mui-tab-label">口碑</span></a><a class="mui-tab-item" href="friends.html"><span class="mui-icon iconfont icon-shejiao"></span><span class="mui-tab-label">朋友</span></a><a class="mui-tab-item " href="mine.html"><span class="mui-icon iconfont icon-changbei"></span><span class="mui-tab-label">我的</span></a></nav></body><script><!--页面数组-->var subpages = ["home.html", "wealth.html", "praise.html", "friends.html", "mine.html"];var index = 0;mui.plusReady(function() {var currentwebview = plus.webview.currentWebview(); <!--得到当前的webview-->for(var i = 0; i < subpages.length; i++) {<!--创建子webview,距离底部51px，让底部的菜单栏可以显示出来-->var sub = plus.webview.create(subpages[i], subpages[i], {top: "0px",bottom: "51px"});if(i > 0) {sub.hide(); <!--如果不是第一个页面，也就是home.html,就让它隐藏-->}currentwebview.append(sub);<!--当前webview添加子webview-->}var activeTab = subpages[0];mui(".footer").on("tap", "a", function() { <!--点击底部菜单栏中的某个超链接，触发tap事件-->var targetPage = this.getAttribute("href"); <!--得到超链接的值-->activeTab = mui(".footer .mui-active")[0].getAttribute("href"); <!--得到当前活动的超链接的值-->if(targetPage == activeTab) {<!--如果目标和当前的活动的超链接的值相同，直接返回，不走下面代码-->return;}plus.webview.hide(activeTab);<!---如果不是同一个超链接，那就显示点击的webview，隐藏活动的webview->plus.webview.show(targetPage);})})</script></html>
我就是我
淡淡的烟草味﹌
淩亂°似流年
亦凉
灰太狼
还没有评论，来说两句吧...