使用Javascript/JQuery更改CSS链接属性onClick？

Question

例如,我有两个链接:

<a onClick="doColorChange()">Link 1</a>
<a onClick="doColorChange()">Link 2</a>

我想要它,以便当我单击链接1时,链接1更改为蓝色以表示选中,链接2保持黑色.当用户单击链接2时,链接2将颜色更改为蓝色,链接1将颜色更改为白色.

我目前有链接的默认CSS属性:

a:link {
   color: #green;
}

我不确定处理"doColorChange()"函数的最佳方法.是否最好为这两种颜色创建两个CSS类,然后让doColorChange切换它们？或者更好的是给两个链接一个id并以某种方式设置颜色属性？我该如何做到这一点？

Answer 1

JQUERY:

$(function() {
   var links = $('a.link').click(function() {
       links.removeClass('active');
       $(this).addClass('active');
   });
});

HTML MARKUP:

<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>

我建议在链接中添加一个类,这样更容易.

CSS:

a.link.active { color:blue; }

添加了实时版(小提琴):http://jsfiddle.net/gHb9F/