[HTML/JS]利用JQuery的load函数动态加载其它页面的内容的实现代码代替Ifram
2015-08-20 15:49
1171 查看
利用JQuery的load函数动态加载别的页面的代码,方便实时获取别的页面的内容。
在线演示:http://demo.jb51.net/js/JQueryload/index.htm
基本语法为:$('#区域id').load('页面名称');
index.html
loadContent1.htm
loadContent2.htm
在线演示:http://demo.jb51.net/js/JQueryload/index.htm
基本语法为:$('#区域id').load('页面名称');
index.html
<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.jb51.net/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').click(function () { $('#load_content').load('loadContent1.htm'); }); $('#btnLoad2').click(function () { $('#load_content').load('loadContent2.htm'); }); $('#btnLoad3').click(function () { $('#load_content').load('http://www.w3school.com.cn/jquery/ajax_load.asp'); }); }); </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"> <button class="button" id="btnLoad1">Load 1</button> </div> <div class="buttonArea"> <button class="button" id="btnLoad2">Load 2</button> </div> <div class="buttonArea"> <button class="button" id="btnLoad3">Load 3</button> </div> </div> <div id="load_content"> <h2>这是要被加载的区 域</h2> </div> </div> </form> </body> </html>
loadContent1.htm
loadContent1.htm
loadContent2.htm
loadContent2.htm
相关文章推荐
- jquery中$.getJSON()
- jquery.cookie.js
- JQuery
- jQuery常用的插件及功能汇总-持续
- 简单的JQuery top返回顶部
- 纯jquery实现模仿淘宝购物车结算
- jquery 计算输入的文本的utf-8字节长度
- jQuery的deferred对象详解
- jquery 分页
- jQuery+HTML5加入购物车代码分享
- jquery 计算两个日期之间的相差天数
- Jquery UI Custom的兼容问题
- jQuery库 之 jquery slimscroll插件使用
- jQuery地图map悬停显示省市代码分享
- Jquery单选框、复选框、下拉框动态设置默认项,及动态获取选中项。
- jQuery超赞的评分插件(8款)
- jQuery tmpl用法总结
- 使用Jquery解析Json基础知识
- jQuery网页版打砖块小游戏源码分享
- jQuery插件开发