只需各修改一個 header 和 footer 檔,即可動態載入 HTML 檔案
index.html、page1.html、page2.html、page3.html
<div id="page"> <div id="header"> 這裡是 header 的 HTML 程式碼</div> <div id="content"> </div> <div id="footer"> 這裡是 footer 的 HTML 程式碼</div> </div>
header.html
<div id="menulinks"> <a href="index.html">回首頁</a> <a href="page1.html">作品集</a> <a href="page2.html">歷年獎項</a> <a href="page3.html">合作案例</a> </div>
footer.html
逗點人 7netic Design ©版權所有
動態載入 common.js 檔
$(function(){ $("#header").load("header.html"); $("#footer").load("footer.html"); });
使用 load 方法,可以動態載入 HTML 檔案
探索更多來自 逗點人設計插畫誌 7netic 的內容
訂閱即可透過電子郵件收到最新文章。