效果：
源码：
<!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>