[TOC] ### jQuery实现方式： ~~~ $(function(){ //将网页装载到名为pages的常量数组中 const pages =["home.html","aboutus.html","productshow.html","joinus.html","contactus.html"]; //主页名装载的默认页面 $("#mx_content").load(pages[0]); //导航栏点击变色兄弟元素隐藏 $("#mx_navigation li").click(function(){ $(this).addClass("select").siblings().removeClass("select"); //div默认装载页面 $("#mx_content").load(pages[$(this).index()]); }); //底部加载页面 $("#changepage div").click(function(){ $("#mx_navigation li").eq($(this).index()+1).addClass("select").siblings().removeClass("select"); $("#mx_content").load(pages[$(this).index()+1]); }); }) html 中要添加 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> ~~~ ### js实现方法： 在指定div中加载页面 ~~~ 使用JavaScript代码替换div内容 <script> function load_home() { document.getElementById("main").innerHTML = '<object type="text/html" data="/Users/lang/Desktop/demo/index.html" width="100%" height="600px"></object>';} </script> 其中”main”为div的id，data中的内容是HTML网页的绝对路径 div代码 <div class="main-container" id="main" style="width:99%"> </div> 进行切换 <a href="javascript:load_home();">切换</a> ~~~