网页公共的部分很多,如果每个页面都要写或者修改,太麻烦,百度后,有两种方案,一是iframe,是之前比较常用的,但总觉得iframe不太好用,最后找到另一种,jq的load方法。
1、先写好公共部分的文件,可以把样式写在<head>中间的<style>标签里面,如果需要操作DOM,也要在该页面写好。
不要在模版页引入公用的CSS或者JavaScript文件,这样会出现重复的样式和事件。
2、在需要引入公共文件的页面:
- 引入JQuery库
- 引入公共模板
<!-- header -->
<div class="header"></div>
<!-- header over-->
<div class="main"></div>
<!--footer-->
<div class="footer"></div>
<!--footer over-->
<script>
// 导入公共模板
$(function(){
$(".header").load("header.html");
$(".footer").load("footer.html");
});
</script>
网友评论