iframe异步加载实现点击左边菜单加载右边内容实例讲解
更新时间：2013年03月04日 14:47:57 作者：
iframe异步加载想必很多朋友对你都不会陌生,接下来将实现这样一个功能左边菜单不能刷新的情况下，异步加载右边的内容页面，感兴趣的你可以参考下本文或许对你有所帮助
关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。
话不多说，做了一个实例大致是这样的：
1、首先在你的项目中建立三个文件如：
2、在Default页面引入jquery文件并在body中加入也下代码：
复制代码 代码如下:
<div style="width: 20%; float: left">
<div id="butten" style="cursor: pointer;">
局部刷新(框架加载页面)
</div>
<div id="hidden" style="display: none">
我是隐藏的，点击局部刷新之后<br />
我就显示，页面加载我不会消失
</div>
</div>
<div id="page" style="width: 80%; float: right;">
<iframe src='1.htm' frameborder='0' style='border: 0; width: 100%; height: 99.4%;'>
</iframe>
</div>
<script type="text/javascript">
$(function () {
$("#butten").click(function () {
$("#hidden").show();
$("iframe").attr("src", "2.htm");
});
});
</script>
3、在1.htm和2.htm中随便写上什么都行，甚至可以直接这样写（什么html、title、body、title等均可不用写）：
1.htm：
复制代码 代码如下:
页面一<br />
原始页面
2.htm：
复制代码 代码如下:
页面二<br />
框架加载的页面
4、效果如图：
相关文章
这篇文章主要介绍了jQuery+css实现的切换图片功能代码,涉及jQuery响应鼠标事件动态变换页面元素样式的相关技巧,需要的朋友可以参考下2016-01-01
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果2012-01-01
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
相信大家喜欢这个界面无非也是喜欢它的动态磁贴。刚好今天研究了一下如何通过JQuery在网页上模仿这种效果，就贴出来给大家喷一下。虽然是一些很低级的技术，但是也希望有需要的朋友可以参考下2013-07-07
jQuery 获取URL的GET参数值的小例子，需要的朋友可以参考一下2013-04-04
Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动的实现代码，需要的朋友可以参考下。2010-11-11
jquery support主要是检测浏览器兼容性，支持力度的方法，用于展示不同浏览器各自特性和bug的属性集合。作为一个静态成员，提供给jquery内部函数，告诉他们某些功能是否能用。避免了以往通过检测浏览器版本做修改。下面我们通过源码详细解读jQ中浏览器兼容模块support。2016-08-08
这篇文章主要介绍了jQuery实现信息提示框效果,带有圆角框与动画功能,点击上面按钮实现对应文字的渐变显示效果,非常具有实用价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jQuery拖拽通过八个点改变div大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了jQuery实现消息弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
基于twbsPagination.js分页插件使用心得(分享)
下面小编就为大家带来一篇基于twbsPagination.js分页插件使用心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论