首先我写了一个DOM结构
然后写了JS代码：
界面如图：
目的是为了：
点击一次下方的标签，使得子页面切换一次。
问题：
下方的按钮点击一次，对应的按钮 处切换过来了，即字体和图表变成蓝色了，但是主界面的子页面并没有改变。需要在点击一次4个当中的按钮一次，才能切换回来。即：
界面显示永远要落后点击事件一次。这是什么原因？
附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">材料混合控制端</h1>
</header>
<div class="mui-content">
<nav class="mui-bar mui-bar-tab muinav">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-plus"></span>
<span class="mui-tab-label">配料</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-compose"></span>
<span class="mui-tab-label">订单</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-bars"></span>
<span class="mui-tab-label" >历史记录</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
</div>
<script type="text/javascript">
mui.init({
preloadPages: [{
id: 'mkfert',
url: 'mkfert.html',
styles: {
top: '45px',
bottom: '52px'
}
},
{
id: 'order',
url: 'order.html',
styles: {
top: '45px',
bottom: '52px'
}
},
{
id: 'record',
url: 'record.html',
styles: {
top: '45px',
bottom: '52px'
}
},
{
id: 'mine',
url: 'mine.html',
styles: {
top: '45px',
bottom: '52px'
}
}]
});
mui(".muinav").on('tap','.mui-tab-item',function(){
refreshView();
});
function refreshView(){
var obj = null;
obj= $(".muinav").children();
console.log($(obj[0]).hasClass("mui-active"));
console.log($(obj[1]).hasClass("mui-active"));
console.log($(obj[2]).hasClass("mui-active"));
console.log($(obj[3]).hasClass("mui-active"));
console.log("----");
if($(obj[0]).hasClass('mui-active')){
var viewmk= plus.webview.getWebviewById('mkfert');
var viewo = plus.webview.getWebviewById('order');
var viewr = plus.webview.getWebviewById('record');
var viewm = plus.webview.getWebviewById('mine');
closewebview(viewo);
closewebview(viewr);
closewebview(viewm);
openwebview(viewmk);
}else if($(obj[1]).hasClass('mui-active')){
var viewmk= plus.webview.getWebviewById('mkfert');
var viewo = plus.webview.getWebviewById('order');
var viewr = plus.webview.getWebviewById('record');
var viewm = plus.webview.getWebviewById('mine');
closewebview(viewmk);
openwebview(viewo);
closewebview(viewr);
closewebview(viewm);
}else if($(obj[2]).hasClass('mui-active')){
var viewmk= plus.webview.getWebviewById('mkfert');
var viewo = plus.webview.getWebviewById('order');
var viewr = plus.webview.getWebviewById('record');
var viewm = plus.webview.getWebviewById('mine');
closewebview(viewmk);
closewebview(viewo);
openwebview(viewr);
closewebview(viewm);
}else if($(obj[3]).hasClass('mui-active')){
var viewmk= plus.webview.getWebviewById('mkfert');
var viewo = plus.webview.getWebviewById('order');
var viewr = plus.webview.getWebviewById('record');
var viewm = plus.webview.getWebviewById('mine');
closewebview(viewmk);
closewebview(viewo);
closewebview(viewr);
openwebview(viewm);
}
}
function closewebview(obj){
plus.webview.hide(obj);
}
function openwebview(obj){
plus.webview.show(obj);
}
</script>
</body>
</html>