HTML后台首页菜单切换, 在内部某个div里加载另一个页面

首页代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>index</title>
        <style type="text/css">
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            #app-container {
                display: flex;
                min-width: 100%;
                min-height: 100%;
            }

            #sidebar {
                width: 10%;
                background-color: #E6FAF0;
            }

            #main {
                width: 90%;
            }
            
            #content{
                border: 1px solid #C80000;
            }
        </style>
    </head>
    <body>
        <div id="app-container">
            <div id="sidebar">
                <aside>
                    Aside
                    <ul>
                        <li><a href="javascript:void(0)">用户管理</a></li>
                        <li><a href="javascript:void(0)">字典管理</a></li>
                    </ul>
                </aside>
            </div>
            <div id="main">
                <header>Header</header>
                <article>
                    <section>
                        <div id="content">
                            <h1>用户管理</h1>
                        </div>
                    </section>
                </article>
                <footer>Footer</footer>
            </div>
        </div>
    </body>
</html>

字典管理代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>字典管理</h1>
    </body>
</html>

用户管理同上

阅读 3.5k
2 个回答

推荐用 vue 或者 react 脚手架来开发吧,两个框架都完善了路由这块功能。

楼主这个场景,可以直接用 ajax 请求整个 html ,如:

const result = ajax('foo.html')

document.getElementById('content').innerHTML = result
jQuery UI 实例 – 标签页(Tabs)
通过 Ajax 获取内容
在标签页链接中设置 href 的值来为标签页通过 Ajax 获取外部的内容。当 Ajax 请求在等待响应时,标签页的标签变为 "Loading...",当加载完成后返回常规的标签。
https://www.runoob.com/try/tr...
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题