利用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 相关文章推荐
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
vue axios用法教程详解
Jul 23 Javascript
微信小程序删除处理详解
Aug 16 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
小程序实现抽奖动画
Apr 16 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
js删除对象中的某一个字段的方法实现
Jan 11 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
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
jstree的简单实例
2016/12/01 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
见习期自我鉴定
2014/01/31 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
单位未婚证明范本
2014/11/25 职场文书
研究生导师评语
2014/12/31 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
2015中学教学工作总结
2015/07/22 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
Java版 简易五子棋小游戏
2022/05/04 Java/Android