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


Posted in Javascript onDecember 14, 2010

在线演示:http://demo.3water.com/js/JQueryload/index.htm
全部代码

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>JQuery - Load</title> 
<link rel="stylesheet" media="all" type="text/css" href="../CSS/myStyle.css" /> 
<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery-1.3.2.min.js"></script> 
<style type="text/css"> 
#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; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#btnLoad1.button').click(function() { 
$('#load_content').load('loadContent1.htm'); 
}); 
$('#btnLoad2.button').click(function() { 
$('#load_content').load('loadContent2.htm'); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="container"> 
<div id="header"> 
<h2>JQuery Load Example</h2> 
</div> 
<div class="buttonListArea"> 
<div class="buttonArea"> 
<div class="button" id="btnLoad1">Load 1</div> 
</div> 
<div class="buttonArea"> 
<div class="button" id="btnLoad2">Load 2</div> 
</div> 
</div> 
<div id="load_content"> 
<h2>这是要被加载的区域</h2> 
</div> 
</div> 
</form> 
</body> 
</html>

loadContent1.htm
3water.com

loadContent2.htm
sc.3water.com

代码打包下载
Javascript 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
Jquery练习之表单验证实现代码
Dec 14 #Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 #Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 #Javascript
JQuery中getJSON的使用方法
Dec 13 #Javascript
JavaScript 学习历程和心得分享
Dec 12 #Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 #Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 #Javascript
You might like
php ajax 静态分页过程形式
2011/09/02 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
javaScript动态添加Li元素的实例
2018/02/24 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
python分割和拼接字符串
2013/11/01 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python字符串切片操作知识详解
2016/03/28 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
四下基层实施方案
2014/03/28 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
大学生实习介绍信
2015/05/05 职场文书
庆七一活动简报
2015/07/20 职场文书
工作后的感想
2015/08/07 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python