jquery 动态加载html,利用JQuery的load函数动态加载其它页面的内容的实现代码

在线演示:http://demo.jb51.net/js/JQueryload/index.htm全部代码

JQuery - Load

#header {

margin-bottom: 1em;

padding-bottom: 1em;

border-bottom: 1px solid #eee;

}

.buttonListArea {

float: left;

width: 150px;

padding-right: 10px;

border-right: 1px solid #eee;

margin-right: 10px;

}

.buttonArea {

margin: 10px;

padding-bottom:20px;

}

#load_content {

float: left;

width: 550px;

text-align:center;

}

$(document).ready(function() {

$('#btnLoad1.button').click(function() {

$('#load_content').load('loadContent1.htm');

});

$('#btnLoad2.button').click(function() {

$('#load_content').load('loadContent2.htm');

});

});

JQuery Load Example

Load 1

Load 2

这是要被加载的区域

loadContent1.htm

jb51.net

loadContent2.htm

sc.jb51.net

代码打包下载