如何使用Javascript/JQuery在单击时更改CSS链接属性？

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，然后在那里设置颜色属性？我该如何实现这一点？

- Teslar

Answer 1

JQUERY:

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

HTML标记：

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

我建议给链接添加一个类，这样会更容易操作。 CSS：

a.link.active { color:blue; }

新增了一个实时版本（fiddle）：http://jsfiddle.net/gHb9F/

- daryl

Answer 2

HTML

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

脚本（使用jQuery）

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

CSS

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

这里是示例代码

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

编辑：

如果您计划执行除简单颜色交换之外的任何操作，则类绝对是最佳选择（只需将.css调用替换为使用自定义类名的.addClass和.removeClass即可）。

- Demian Brecht

Answer 3

尝试使用这段代码。我发现它很简单易用。

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

- Akshay Raut

Answer 4

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

- user719631

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 Fiddle演示。

- David Thomas

Answer 6

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

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');

});

- Marc Bouvier

Answer 7

给元素添加CSS类会是更好的选择。您可以使用对象上的className属性来实现。在doCOlorChange中，您可以编写this.className ="newclassName";

- Sachin Nayak