首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

Html利用锚点标记顶替iframe实现页面无刷新加载

2013-04-09 
Html利用锚点标记代替iframe实现页面无刷新加载在Html中,有时为了实现页面的无刷新加载,相信有不少人会用

Html利用锚点标记代替iframe实现页面无刷新加载

在Html中,有时为了实现页面的无刷新加载,相信有不少人会用到iframe标签。尤其是在做后台管理系统的时候,经常会在左边放置一个导航菜单,然后将正文显示在iframe中,类似如下写法:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><title>测试页面</title></head><body><a href="#/~lc">测试链接</a><br><a href="#/~lc">测试链接</a><br><a href="#/~lc">测试链接</a><br><div id="content"></div></body><script type="text/javascript">$('a').each(function() {this.onclick = function() {$.get(this.href.split('#/~')[1], function(data) {$('#content').html(data);});};});</script></html>


在上述代码中,a标签的链接被写成锚点的形式,这样在点击链接的时候,地址栏依然会发生变化,但是页面不会发生跳转,不会重新请求该页面。接下来就是对a标签进行事件绑定了,然后通过Ajax请求页面,实现无刷新加载,够简单吧。

本文地址

热点排行