教程集 > jQuery > jquery 教程 > 正文 jquery捕获超链接事件并局部刷新的代码一例

jquery捕获超链接事件并局部刷新的代码一例

发布时间：2015-10-12 编辑：jiaochengji.com

要求在当前页面打开一个超链接，根据需要进行局部刷新。当用户选择新窗口打开超链接时，超链接仍然可以到达预想的页面。本文用jquery来实现如上的需求，有兴趣的朋友，可以参考看看。

1、核心代码
代码中引用的jquery文件，大家自行添加吧。

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jquery捕获超链接事件并局部刷新-www.jbxue.com</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* 点击事件会在超链接跳转前发生 */ $("#div_test a").click(function(){ var link = $(this).attr('href'); $('#div_view').attr('src', link); var href = window.location.href; window.location.href = href.substr(0, href.indexOf('#')) + '#' + link; return false; }); }); </script> </head> <body> <div id="div_test"> <ol> <li><a href="http://www.jbxue.com">jbxue.com</a></li> <li><a href="http://www.jbxue.com/wb/php">php编程</a></li> <li><a href="http://www.jbxue.com/wb/regular">正则表达式</a></li> </ol> </div> <iframe id="div_view" width="100%"></iframe> </body> </html>

以上只是一个测试代码，仅供大家学习参考。
当点击一个超链接事件之后，页面通过iframe来进行局部刷新。而此时浏览器的地址栏应该会发生变化，这个如何改动呢？
我是通过修改 window.location 来使地址发生改变的，但是只能改变#符号后面的内容吧。
如果前面的内容也变了，可能会导致浏览器刷新整个页面？

哪位高手知道解决方法，欢迎分享一下，不胜感激！

附，本例中的效果图。
捕获超链接事件并局部刷新

您可能感兴趣的文章：
jquery捕获超链接事件并局部刷新的代码一例
 基于jQuery捕获超链接事件进行局部刷新代码
 UpdatePanel和Jquery冲突的解决方法
 jQuery 2.0.3 源码分析事件绑定 – bind/live/delegate/on
jQuery源码分析系列(30) : Ajax 整体结构
 Laravel 5 中集成 Pjax 实现无刷新加载页面案例
 js捕获键盘事件(兼容各浏览器)的实例参考
 Jquery.load载入页面实现局部刷新的代码
 什么是MVC模式
 前端性能优化（JavaScript补充篇）

关键词： 超链接 局部刷新 　

上一篇：jquery实现隔行变色、鼠标移动变色的小插件下一篇：Jquery选择器实现隔行变色的代码一例

[关闭]

jquery捕获超链接事件并局部刷新的代码一例

最近更新

浏览排行