利用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 相关文章推荐
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
JavaScript中的LHS和RHS分析详情
Apr 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警告错误信息的解决方法
2013/06/03 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
Jquery实现简单的动画效果代码
2012/03/18 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
店面销售职位的职责
2014/03/09 职场文书
搞笑车尾标语
2014/06/23 职场文书
写给医院的感谢信
2015/01/22 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
小学运动会前导词
2015/07/20 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
Redis的字符串是如何实现的
2021/10/24 Redis
Python开发五子棋小游戏
2022/04/28 Python