CSSrainbow.cn

Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞.

Tutorials \ MooTools \ Tutorials \ jQuery

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

Posted on: in MooTools, jQuery By:
Rainbow
0

笔者非常喜欢 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://cssrainbow.cn/Mootools/demo7/Link-Click-MooTools.htm

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

Leave a Comment