让链接(link)充满活力,基于MooTools & jQuery实现的

笔者非常喜欢 Safari浏览器和iPhone,他在使用这些产品时,感受到,当你单击某一个链接时,马上就会提供了一个黑暗的背景效果,功能虽然看上去简单,但是这一个小的细节非常有利于用户体验。 那么,为什么不让我们所有的网页链接都具有此功能那?其实我们可以利用 MooTools or jQuery 很容易实现的 。

The CSS

1
.clicked { padding:1px 2px; -moz-border-radius:5px; background:#aaa; }

The MooTools Javascript

1
2
3
4
5
6
7
window.addEvent('domready',function() {
	var lynx = $$('a');
	lynx.addEvent('click',function(e) {
		lynx.removeClass('clicked'); //remove from others
		this.addClass('clicked');
	});
});

以上的版本可以改进,让它可以更节省资源。

改进后的代码如下:

1
2
3
4
5
6
7
window.addEvent('domready', function() {
	var activeLink = null;
	$$('a').addEvent('click', function(e){
		if (activeLink) activeLink.removeClass('clicked'); // remove from active
		activeLink = this.addClass('clicked'); 
	}); 
});

The jQuery Javascript

1
2
3
4
5
6
7
$(document).ready(function() {
	var lynx = $('a');
	lynx.click(function(e) {
		lynx.removeClass('clicked');
		$(this).addClass('clicked');
	});
});

演示:http://blog.moocss.com/Mootools/demo7/Link-Click-MooTools.htm

我的例子让页面上的链接显示了灰色的背景,但它是灵活的,由于我们使用了单个的CSS类,您可以自由定制你想要的背景颜色和其它样式效果。当点击一个链接,就这一时刻,你可以看到了增加的效果,多么美好的事情呀!!!

站点统计