Javascript 不刷新特定部分的页面之间的HTML链接

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

我认为这可以通过iFrame实现，但我不认为iFrame是一个很好的移动解决方案，不是吗

如果iFrame真的是一个糟糕的移动解决方案，我可以用HTML-CSS或任何类型的Javascript库以另一种方式来实现吗

有3个不同的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;
}

主割台
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分
这里是内容部分

.包装纸{
宽度：300px；
高度：500px；
边框：1px实心#ccc；
位置：相对位置；
溢出：自动；
}
header.main-header{
宽度：300px；
高度：50px；
背景颜色：橙色；
位置：固定；
线高：40px；
颜色：#fff；
字体系列：“Verdana”；
文本对齐：居中；
}
副标题{
宽度：300px；
高度：50px；
背景颜色：橙色；
位置：固定；
顶部：50px；
}
标题.副标题.菜单a{
宽度：100px；
浮动：左；
文本对齐：居中；
线高：47px；
颜色：#fff；
字体系列：“Verdana”；
文字装饰：无；
显示：块；
}
标题.副标题.菜单a.激活{
底部边框：3倍纯红；
}
标题.副标题.菜单a:悬停{
底部边框：3倍纯红；
}
.内容{
边缘顶部：100px；
填充：25px；
文本对齐：居中；
}

很难说清楚，因为你还没有真正定义你想要菜单做什么，但是你很可能可以使用CSS

：hover

psuedo-class实现你想要的。菜单的行为需要像Facebook Android应用程序一样。我认为这已经足够清楚了。