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

所以例如我有两个链接：

Link 1 Link 2 

我想要它，以便当我单击链接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：

 Link 1 Link 2 

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

CSS：

 a.link.active { color:blue; } 

添加了实时版（小提琴）： http ： //jsfiddle.net/gHb9F/

Answer 2

HTML

 Link 1 Link 2 

脚本（使用jQuery）

 $(document).ready(function(){ $('a').click(function(){ $('a').css('color', 'black'); $(this).css('color', 'blue'); }); }); 

CSS

 a:link { color: black; } a:visited { color: black; } 

在这里小提琴

注意：颜色更改将应用​​于页面上当前的所有锚点。 如果要将其限制为少数几个，则将它们放在一个类中，并将该类添加到选择器中。

编辑：

如果您计划进行除简单颜色交换之外的任何操作，那么类绝对是.addClass的方法（只需用.css调用.addClass和.removeClass替换自定义类名。

Answer 3

试试这个代码。 我觉得它很简单。

   Link 1 Link 2 

Answer 4

 var doColorChange=function(){ this.style.color="blue";} 

Answer 5

链接的默认CSS颜色应为：

 a:link { color: #0f0; /* or color: green; color: rgb(0,255,0); } 

否则，使用jQuery，您可以通过以下方式实现此目的：

 $('a').click( function(){ $('.selectedLink').removeClass('selectedLink'); $(this).addClass('selectedLink'); return false }); 

加上CSS：

 .selectedLink { color: #00f; } 

JS小提琴演示 。

Answer 6

在css中创建2个不同的类，然后在单击链接时在链接上交换类。 CSS

 a.link{ color : green; } a.selected{ color : black; } 

使用Javascript

 jQuery(a).click(function() { jQuery('a.selected').addClass('link'); jQuery('a.selected').removeClass('selected'); jQuery(this).removeClass('link'); jQuery(this).addClass('selected'); }); 

Answer 7

给元素css类是一个更好的选择。 您可以通过在对象上使用className属性来完成此操作。 在doCOlorChange中你可以写this.className ="newclassName";