<nav class="mui-bar mui-bar-tab" id="nav">
<a class="mui-tab-item mui-active" id="0">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="1">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">巡课</span>
</a>
<a class="mui-tab-item" id="2">
<span class="mui-icon mui-icon-compose"></span>
<span class="mui-tab-label">反馈</span>
</a>
<a class="mui-tab-item" id="3">
<span class="mui-icon mui-icon-flag"></span>
<span class="mui-tab-label">课程</span>
</a>
<a class="mui-tab-item" id="4">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">通讯录</span>
</a>
</nav>
js
<script type="text/javascript">
mui.plusReady(function() {
//设置默认打开首页显示的子页序号
var Index = 0;
//把子页面路径写在数组里面
var subpages = ['home.html', 'xunke.html', 'feedback.html', 'course.html', 'mine.html']
//获取当前页面所属的Webview窗口对象
var self = plus.webview.currentWebview();
for(var i = 0; i < 5; i++) {
//创建webview子页
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '50px',
bottom: '44px',
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>