Question

首先，我正在使用cordova设计混合移动应用程序的UI。我需要在此应用程序中实现基本的应用程序功能。你可以看到演示HERE。我想做的事情就像在Facebook Android应用程序中一样。我有菜单1 - 菜单2和菜单3以及内容部分，如您所见。我想在菜单之间切换时不要刷新两个标题部分（如果可能，可以通过滑动切换或者只是触摸作为基本链接）现在我的问题就在这里;

我认为这可以通过iFrame完成，但我认为iFrame不是移动设备的好解决方案，不是吗？
如果iFrame对移动设备来说真的是一个糟糕的解决方案，我可以用HTML - CSS或任何类型的Javascript库以其他方式实现吗？
有两个不同的html页面进行切换比只有一个不同的3个部分的html页面更好吗？哪一个是最好的方式？

提前致谢。

<div class="wrapper">
    <header class="main-header">Main Header</header>
    <header class="subheader">
        <div class="menu"><a href="" class="active">MENU 1</a></div>
        <div class="menu"><a href="">MENU 2</a></div>
        <div class="menu"><a href="">MENU 3</a></div>
    </header>
    <div class="content">HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br>HERE IS THE CONTENT PART<br></div>
</div>

    .wrapper {
    width:300px;
    height:500px;
    border:1px solid #ccc;
    position:relative;
    overflow:auto;
}

header.main-header {
    width:300px;
    height:50px;
    background-color:orange;
    position:fixed;
    line-height:40px;
    color:#fff;
    font-family:"Verdana";
    text-align:center;
}

header.subheader {
    width:300px;
    height:50px;
    background-color:orange;
    position:fixed;
    top:50px;
}

header.subheader .menu a{
    width:100px;
    float:left;
    text-align:center;
    line-height:47px;
    color:#fff;
    font-family:"Verdana";
    text-decoration:none;
    display:block;
}

header.subheader .menu a.active {
    border-bottom:3px solid red;
}

header.subheader .menu a:hover {
    border-bottom:3px solid red;
}

.content {
    margin-top:100px;
    padding:25px;
    text-align:center;
}

页面之间的HTML链接而不刷新特定部件

0 个答案: