位置：首页>> 网络编程>> JavaScript>> jQuery点击改变链接的文本

jQuery点击改变链接的文本

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

标签：jQuery,链接,浏览器

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 进行筛选，你可以选择只针对侧边栏的链接啊或者导航链接啊或者只是文章标题等。

2 下一页

投稿

jQuery点击改变链接的文本

猜你喜欢