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

Change CSS Link Property onClick with Javascript/JQuery?

提问by Teslar

So for example i have two links:

例如，我有两个链接：

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

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.

我想要这样，当我单击链接 1 时，链接 1 变为蓝色以表示选中，链接 2 保持黑色。当用户单击链接 2 时，链接 2 将颜色更改为蓝色，链接 1 将颜色更改回白色。

I currently have a default CSS property for links:

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

a:link {
   color: #green;
}

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?

我不确定处理“doColorChange()”函数的最佳方法。最好为两种颜色创建两个 CSS 类，然后让 doColorChange 切换它们吗？或者最好给这两个链接一个 id 并以某种方式在那里设置颜色属性？我该如何实现？

回答by daryl

JQUERY:

查询：

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

HTML MARKUP:

HTML 标记：

<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:

CSS：

a.link.active { color:blue; }

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

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

回答by Demian Brecht

HTML

HTML

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

Script (using jQuery)

脚本（使用 jQuery）

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

CSS

CSS

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

Fiddle here

在这里摆弄

Note:The color change will be applied to allanchors current on your page. If you want to limit it to a select few, then put them in a class and add that class to the selector.

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

Edit:

编辑：

If you plan on doing anything other than simple color swap, then classes are definitely the way to go (just substitute the .csscalls for .addClassand .removeClasswith your custom class names.

如果你打算做不是简单的色彩交换等什么，那么类是肯定要走（刚刚替补的方式.css呼吁.addClass，并.removeClass与您的自定义类的名字。

回答by Akshay Raut

Try this code. I found it simple to use.

试试这个代码。我发现它使用起来很简单。

       <script type="text/javascript">
            var currentLink = null;
            function changeLinkColor(link){
                if(currentLink!=null){
                    currentLink.style.color = link.style.color; //You may put any color you want
                }
                link.style.color = 'blue';
                currentLink = link;
            }
       </script>

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

回答by Marc Bouvier

Make 2 different classes in css and then swap classes on the links when you click on your link. CSS

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

a.link{
   color : green;
}

a.selected{
   color : black;
}

Javascript

Javascript

jQuery(a).click(function()
{

   jQuery('a.selected').addClass('link');
   jQuery('a.selected').removeClass('selected');
   jQuery(this).removeClass('link');
   jQuery(this).addClass('selected');

});

回答by user719631

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

回答by Sachin Nayak

giving the elements css classes would be a better option. You could do it by using the className property on the object. in doCOlorChange you could write this.className ="newclassName";

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

回答by David says reinstate Monica

Your default CSS colour for links should be:

链接的默认 CSS 颜色应该是：

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

Otherwise, using jQuery, you can achieve this with:

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

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

Coupled with the CSS:

结合CSS：

.selectedLink {
    color: #00f;
}

JS Fiddle demo.

JS小提琴演示。