html5如何做到使用导航栏切换页面时不重新加载页面
像APP或者微信小程序一样，底部是导航栏，在几个页面间互相切换。请问如何做到每次切换都不要重新加载页面，也就是要保留每个页面的状态。...
像APP或者微信小程序一样，底部是导航栏，在几个页面间互相切换。请问如何做到每次切换都不要重新加载页面，也就是要保留每个页面的状态。
展开
2个回答
展开全部
我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。
实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：
建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。
用jQuery方法来切换页面，语言比较简单网上搜一下看看就懂了
下面附上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<!--jQuery 百度CDN库-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// 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>
<h1>标题一</h1>
</div>
<div>
<div>
<ul>
<li><button id="b1">菜单1</button></li>
<li><button id="b2">菜单2</button></li>
</ul>
</div>
<div>
<div id="tab_1">
子页面1
</div>
<div id="tab_2" style="display: none">
子页面2
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以采用标签页的形式，写好在html里面，点击导航之后隐藏原来的内容，在显示另外的内容
或者采用ajax异步交互的形式，也是去掉原来的内容，在加载新的内容
或者采用ajax异步交互的形式，也是去掉原来的内容，在加载新的内容
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
