html页面分割成块

使用jquery的load() 方法

引入jquery   (推荐一个很好的免费cdn http://www.bootcdn.cn/)  

创建一个index.html

<div id="head"></div> 
<div id="content"></div> 
<div id="foot"></div>  

<script> 
$('#head').load('head.html');
$('#content').load('content.html');
$('#foot').load('foot.html'); 
</script>

载入远程HTML文件代码并插入至DOM中,默认使用GET方式。

load(url,data,callback)

参数说明:

url:待加载的HTML网页网址

data:发送至服务器的key / value数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数

注意事项:需要控制好css样式,最好写在index.html 或者在index.html进行引用

js可能会产生一些不好用的状态,例如点击事件,可以依靠事件委托进行处理,例如$('body').on('click','#header',function(){alert('ok') });

原文地址:https://www.cnblogs.com/oonezhaoo/p/8109277.html