mui底部导航栏切换

<nav class="mui-bar mui-bar-tab" id="mui-nav">
			<a class="mui-tab-item mui-active" id="0">
				<span class="mui-icon index"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" id="1">
				<span class="mui-icon check"></span>
				<span class="mui-tab-label">入住办理</span>
			</a>
			<a class="mui-tab-item" id="2">
				<span class="mui-icon my"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

<script src="js/mui.min.js"></script>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			//			点击nav切换页面
			mui.plusReady(function() {
				//设置默认打开首页显示的子页序号
				var Index = 0;
				//把子页面路径写在数组里面
				var subpages = ['index.html', 'check_in.html', 'my.html']
				//获取当前页面所属的Webview窗口对象
				var self = plus.webview.currentWebview();
				for(var i = 0; i < 3; i++) {
					//创建webview子页
					var sub = plus.webview.create(
						subpages[i], //子页url
						subpages[i], //子页id
						{
							top: '0px',
							bottom: '57px',
							scrollIndicator: "none" //隐藏滚动条
						}
					);
					//如果不是我们设置的子页就隐藏
					if(i != Index) {
						sub.hide()
					}
					//将webview对象填充到窗口
					self.append(sub)
				}

				//当前激活选项
				var activeTab = subpages[Index]
				var targetTab;
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					//获取子页面的id
					var j = this.getAttribute('id')
					targetTab = subpages[j]
					if(activeTab == targetTab) {
						return
					}
					//显示目标选项卡
					plus.webview.show(targetTab)
					//隐藏当前选项卡
					plus.webview.hide(activeTab)
					//更改当前活跃选项卡
					activeTab = targetTab
				});
			})
		</script>

<style type="text/css">
			.mui-bar-tab{
				height: 1.5rem;
			}
			.index{
				background-image: url(img/nav_index.png);
				background-size: .56rem;
				 background-repeat:no-repeat;
				 background-position: 50%;
			}
			.mui-bar-tab .mui-tab-item.mui-active .index{
				background-image: url(img/nav_index_select.png);
				background-size: .56rem;
				 background-repeat:no-repeat;
				 background-position: 50%;
			}
			.check{
				background-image: url(img/nav_check.png);
				background-size: .48rem .54rem;
				 background-repeat:no-repeat;
				 background-position: 50%;
			}
			.mui-bar-tab .mui-tab-item.mui-active .check{
				background-image: url(img/nav_check_select.png);
				background-size: .48rem .54rem;
				 background-repeat:no-repeat;
				 background-position: 50%;
			}
			.my{
				background-image: url(img/nav_my.png);
				background-size: .41rem .57rem;
				 background-repeat:no-repeat;
				 background-position: 50%;
			}
			.mui-bar-tab .mui-tab-item.mui-active .my{
				background-image: url(img/nav_my_select.png);
				background-size: .41rem .57rem;
				 background-repeat:no-repeat;
				 background-position: 50%;
			}
			.mui-bar-tab .mui-tab-item.mui-active{
				color: #1bccba;
			}
		</style>