2. JQuery-load實現頭尾封裝 · JS文檔

## JQuery-load實現頭尾封裝 ``` $(function(){ $("#head").load("cm_html/head.html") //相對于index.html的路徑 }) ``` css引用: `@import 'common';` ## JQuery-load實現頁面封裝加載 ``` $(function(){ const pages = ['cmhtml/home.html', "cmhtml/aboutus.html", "cmhtml/productshow.html", "cmhtml/joinus.html", "cmhtml/contactus.html"]; $("#mx-content").load(pages[0]); $("#mx-navigation li").click(function(){ // event.preventDefault(); $(this).addClass("select").siblings().removeClass("select"); $("#mx-content").load(pages[$(this).index()]); }) ``` ### 注意： 1. 引用頁面封裝時，封裝位置相對于index.html的路徑 2. 引用頁面封裝時，取封裝的代碼只取`<body>`部分，也就是說，封裝html的頭部文件會導致無效，但可以將需要的css/js鏈接引入index.html 3. 引用頁面封裝時，封裝的html代碼所需要的js代碼需單獨寫入封裝的html代碼`<body>`部分。如“木兮地板”作業中往index引入productshow.html，productshow部分所需的js代碼放在index.html中無效但放在productshow中`<body>`部分生效