jQuery点击改变链接的文本

来源:Leeiio Chaos 时间:2010-03-19 18:11:00 

jQuery 真是一个非常伟大的 javascript library,至少在我不会写 JS 的时候第一时间接触了它,虽然还有其他很多优秀的 javascript library,但是目前我还是对其情有独钟,它让你的网站显得更加酷,同时在一定程度上给了用户不错的视觉体验…

有时候浏览器变得缓慢或者网络十分缓慢的时候,当你点击了一个链接,你要做的就是对着页面傻看着,页面既不刷新,也没有任何提示,并没有给用户一个好的引导。一些并不是网络从业者的访客可能都不知道你的网站到底怎么了,明明点击了链接却没有反应,从而造成了不好的印象。所以我觉得,为什么不给出一些提示来告诉他们页面正在加载中呢(当他们点击了某个链接的时候)。




$('a').click(function(){ 
$(this).text('loading...'); 
}); 

以上这段代码就是改变你所点击的链接的文本为 loading…当然你如果只想让局部的链接有这种效果的话,自己去选择对象吧。

也许你也已经注意到本站在点击链接的时候,除了链接文本变为 loading…之外,还会在左上角弹出页面加载的提示,虽然都是些噱头的功能,但是无疑会让用户觉得很眩,多少会吸引用户的注意力从而让等待显得不那么漫长。

我的做法是在你的模板里放置如下代码( CSS 自行控制,别忘了让其绝对定位到顶部):




<div id="clickload">页面假装异步加载中...</div> 

然后就是使用 jQuery 来控制以上的 Div 的显示:




$('a').click(function(){ 
$(this).text('loading...'); 
$('#clickload').show(); 
}); 

不过有一点要提醒的是,显然你不能对全站的 a 链接都启用这个效果,因为还有一些 a 链接是在新窗口打开外链或者是 # 或者是 javascript 的,当你点击那些链接的时候当前页面显然不会跳转到新的页面,那么左上角弹出的提示显然也不会被刷新掉,所以你需要对 a 进行过滤。

我只做了简单的过滤,排除了那些新窗口打开的外链




$('a[href*="http://leeiio.me"]') 

当然具体还得因你自己的站而对 a 进行筛选,你可以选择只针对侧边栏的链接啊或者导航链接啊或者只是文章标题等。

标签:jQuery,链接,浏览器
0
投稿

猜你喜欢

  • 如何在Python函数执行前后增加额外的行为

    2023-05-27 17:35:20
  • asp加载access数据库并生成XML文件范例

    2008-07-22 12:41:00
  • python 定义类时,实现内部方法的互相调用

    2023-11-20 11:09:31
  • PHP读取txt文本文件并分页显示的方法

    2023-09-06 21:13:25
  • php封装的单文件(图片)上传类完整实例

    2024-05-03 15:50:18
  • PHP实现获取第一个中文首字母并进行排序的方法

    2023-10-30 12:29:08
  • Python selenium 三种等待方式解读

    2023-12-26 05:37:56
  • python扫描proxy并获取可用代理ip的实例

    2023-07-29 16:42:50
  • MYSQL之插入极限分析

    2024-01-22 13:35:44
  • 如何创建并使用一个断开连接的记录集的数据访问页?

    2009-11-14 20:50:00
  • 深入浅析ImageMagick命令执行漏洞

    2022-07-21 11:50:46
  • ajax代理程序,自动判断字符编码

    2007-11-04 13:17:00
  • 动态载入树 (ASP+数据库)

    2010-05-27 12:20:00
  • pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)

    2022-04-06 05:10:06
  • Python逐行读取文件中内容的简单方法

    2023-03-02 16:01:09
  • Windows10系统下Mysql8.0.13忘记root密码的操作方法

    2024-01-17 00:22:20
  • Python基于scrapy采集数据时使用代理服务器的方法

    2022-06-03 08:37:04
  • mysql聚簇索引的页分裂原理实例分析

    2024-01-15 00:58:47
  • Python2.x中文乱码问题解决方法

    2023-09-20 14:35:35
  • 基于Python获取照片的GPS位置信息

    2021-02-25 03:32:00
  • asp之家 网络编程 m.aspxhome.com