我描述一下问题，请了解的朋友帮忙解答一下：
1、新建了一个index，其中包括header、nav和content。
2、nav选项有4个，每个间的切换都是正常，并且content显示不同内容。
修改内容：
现在想在每个底部选项间切换时，每个选项对应的content显示一个由mui.init({所加载的子页面。
问题：
无论怎么改，只全局显示最后一个增加的mui.init({子页面，无法做到不同选项加载不同子页，查找相关文档没有提及，比较苦恼,请高手帮忙，谢谢！
附index.html代码：
{{{
<!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">
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
</head>
<body>
<style>
.mui-control-content h3 {
padding-top: 100px;
text-align: center;
}
</style>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#ceshi1">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="#ceshi2">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="#ceshi3">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#ceshi4">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
<div class="mui-content">
<div id="ceshi1" class="mui-control-content mui-active">
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">测试1</h1>
</header>
<script>
mui.init({
subpages: [{
id: 'list',
url: 'list.html',
styles: {
top: '48px',
bottom: '48px',
bounce: 'vertical'
//scrollIndicator : "none"
}
}]
});
</script>
</div>
<div id="ceshi2" class="mui-control-content">
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">测试2</h1>
</header>
<script>
mui.init({
swipeBack: false,
subpages: [{
id: 'list2',
url: 'list2.html',
styles: {
top: '48px',
bottom: '48px',
bounce: 'vertical'
//scrollIndicator : "none"
}
}]
});
</script>
</div>
<div id="ceshi3" class="mui-control-content">
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">测试3</h1>
</header>
<script>
mui.init({
swipeBack: false,
subpages: [{
id: 'list3',
url: 'list3.html',
styles: {
top: '48px',
bottom: '48px',
bounce: 'vertical'
//scrollIndicator : "none"
}
}]
});
</script>
</div>
<div id="ceshi4" class="mui-control-content">
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">测试4</h1>
</header>
<<script>
mui.init({
swipeBack: false,
subpages: [{
id: 'list4',
url: 'list4.html',
styles: {
top: '48px',
bottom: '48px',
bounce: 'vertical'
//scrollIndicator : "none"
}
}]
});
</script>
</div>
</div>
</body> </html>
}}}
njnelson (作者)
已解决，非常感谢！
2014-10-18 17:52