利用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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
原生JS实现留言板
Mar 26 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
PyQt5实现下载进度条效果
2018/04/19 Python
通过Pandas读取大文件的实例
2018/06/07 Python
Python for循环及基础用法详解
2019/11/08 Python
python属于跨平台语言码
2020/06/09 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
什么是lambda函数
2013/09/17 面试题
技术总监的工作职责
2013/11/13 职场文书
车辆工程专业求职信
2014/04/28 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python