mui 公共底部tap栏切换效果

底部tap栏代码
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="one">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="two">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" id="three">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" id="four">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>

JS代码
function changeView(id){
var view = plus.webview.getWebviewById(id);
view.show();
}
mui.init({
subpages:[
{
url:'index.html',
id:'index.html',
styles:{
top:'0px',
bottom:'0px',
}
},
{
url:'plus/one.html',
id:'one.html',
styles:{
top:'0px',
bottom:'44px',
}
},
{
url:'plus/two.html',
id:'two.html',
styles:{
top:'0px',
bottom:'44px',
}
},
{
url:'plus/three.html',
id:'three.html',
styles:{
top:'0px',
bottom:'44px',
}
},
{
url:'plus/four.html',
id:'four.html',
styles:{
top:'0px',
bottom:'44px',
}
}
]
});
mui.plusReady(function(){
var index = plus.webview.getWebviewById('one.html')
index.show();//进入初始化为首页显示
//监听
document.getElementById('one').addEventListener('tap',function(){
changeView('one.html');
});
document.getElementById('two').addEventListener('tap',function(){
changeView('two.html');
});
document.getElementById('three').addEventListener('tap',function(){
changeView('three.html');
});
document.getElementById('four').addEventListener('tap',function(){
changeView('four.html');
});
})
此种写法不会出现多次点击白屏效果，亦不会出现进入后不是首页