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/

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

<强> Fiddle here

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

修改

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

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>

Answer 4

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

Answer 5

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

Answer 6

链接的默认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 demo

Answer 7

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

});

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

7 个答案: