html5开发的手机APP怎么做首页的菜单页面切换?_随笔

如果不想用传统的页面跳转，可以考虑使用一下前端的MVC框架，比如backbone.js比如Angular.js都可以实现你说的那种，上下不动只有中间的内容在变，其实加载的是不同的模板，然后用路由控制的，整个浏览器始终处在一个界面中，只是在不停的重新渲染内容，页面并没有跳转，这个应该就是你想要的了吧

我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。

实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：

建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。

用jQuery方法来切换页面，语言比较简单网上搜一下看看就懂了

下面附上代码

<!DOCTYPE html>

<html>

<head>

// jQuery代码

$(document).ready(function () {

$("#b1").click(function () {

$("#tab_1").show()// 显示

$("#tab_2").hide()// 隐藏

})

$("#b2").click(function () {

$("#tab_1").hide()

$("#tab_2").show()

})

</script>

</head>

<body>

<div>

</div>

<div>

<ul>

</ul>

</div>

<div>

子页面1

</div>

子页面2

</div>

</body>

</html>

导航栏下面放一个Div，专门用来显示对应导航栏目的内容。点击导航栏触发点击事件，在事件函数中获取点击的栏目id，通过此id确定往div中添加那个内容。可以用div.innerHTML来更新div显示的内容。

或者，导航栏下面放置多个Div，数量等于导航栏目的个数，所有div要都重叠在一起。在点击事件函数中控制div的显示和隐藏。

欢迎分享，转载请注明来源：内存溢出

html5开发的手机APP怎么做首页的菜单页面切换?