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>`部分生效