[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> ~~~