我想实现点击下面tab切换头部标题也跟着切换，但是中间的view就显示不出来。求指教
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css"/>
<style>
.title{
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
.oa-contact-cell.mui-table .mui-table-cell {
padding: 11px 0;
vertical-align: middle;
}
.oa-contact-cell {
position: relative;
margin: -11px 0;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
}
.setting-page{
float: right;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="examples/online_mall_page.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">在线商城</span>
</a>
<a class="mui-tab-item" href="examples/mall_classification_page.html">
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">商城分类</span>
</a>
<a class="mui-tab-item" href="examples/member_services_page.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">会员服务</span>
</a>
<a class="mui-tab-item" href="examples/scanning_shopping_page.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">扫码购</span>
</a>
<a class="mui-tab-item" href="examples/personal_center_page.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">个人中心</span>
</a>
</nav>
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
//设置默认打开首页显示的子页序号；
var Index=0;
//把子页的路径写在数组里面
var subpages = ['examples/online_mall_page.html','examples/mall_classification_page.html','examples/member_services_page.html','examples/scanning_shopping_page.html','examples/personal_center_page.html'];
//所有的plus-*方法写在mui.plusReady中或者后面。
mui.plusReady(function() {
//获取当前页面所属的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: '50px'//设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏，否则添加到窗口中
if (i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[Index],title=document.querySelector(".mui-title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
//获取目标子页的id
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前选项卡
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
</script>
</html>
0 个回复