html5如何做到使用导航栏切换页面时不重新加载页面

像APP或者微信小程序一样，底部是导航栏，在几个页面间互相切换。请问如何做到每次切换都不要重新加载页面，也就是要保留每个页面的状态。

举报该问题

推荐答案 2022-02-09

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

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

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

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

下面附上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    
    <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>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://44.wendadaohang.com/zd/GYGYRWRZRYGG6GZD3ZR.html

其他回答

第1个回答推荐于2018-01-05

可以采用标签页的形式，写好在html里面，点击导航之后隐藏原来的内容，在显示另外的内容
或者采用ajax异步交互的形式，也是去掉原来的内容，在加载新的内容本回答被提问者和网友采纳

相似回答

大家正在搜