更改CSS链接属性onClick与Javascript / JQuery？ [英] Change CSS Link Property onClick with Javascript/JQuery?

问题描述

例如，我有两个链接：

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

我想要的话，当我点击链接1时，链接1变为蓝色代表所选，链接2保持黑色。当用户点击链接2时，链接2将颜色更改为蓝色，链接1将颜色更改为白色。

I want it so that when I click Link 1, Link 1 changes to color blue to represent selected, Link 2 stays black. When the user clicks Link 2, then Link 2 changes color to blue and Link 1 changes color back to white.

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

I currently have a default CSS property for links:

a:link {
   color: #green;
}

我不确定处理doColorChange 。最好是为两种颜色创建两个CSS类，然后用doColorChange切换它们呢？或者是更好地给这两个链接的id和不知何故设置颜色属性？如何完成此操作？

I am unsure of the best way to handle the "doColorChange()" function. Is it best to create two CSS classes for the two colors, then have doColorChange switch them? Or is it better to give the two links an id and somehow set color properties there? How do I accomplish this?

推荐答案

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>

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

I suggest adding a class to the links, that way it's easier.

CSS：

a.link.active { color:blue; }

添加了实时版本（fiddle）： http://jsfiddle.net/gHb9F/

Added a Live Version (fiddle): http://jsfiddle.net/gHb9F/

这篇关于更改CSS链接属性onClick与Javascript / JQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！