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

因此，例如我有两个环节：使用Javascript/JQuery更改CSS的链接属性onClick？

<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，并以某种方式设置颜色属性？我该如何做到这一点？

来源

2011-04-22 Teslar

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

增加了一个现场版本（小提琴）：http://jsfiddle.net/gHb9F/

来源

2011-04-22 01:05:01 daryl

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

来源

2011-04-22 00:59:36 user719631

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

来源

2011-04-22 01:01:26

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

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

再加上CSS：

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

否则，使用jQuery，你可以做到这一点

.selectedLink { 
    color: #00f; 
}

JS Fiddle demo。

来源

2011-04-22 01:03:55

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

注：颜色的变化将被应用到所有锚页面上电流。如果你想限制它选择少数，然后把它们放在一个类中，并将该类添加到选择器中。

编辑：

如果您打算做比简单的色彩交换其他东西，那么类是肯定要走（只是代替.addClass和.removeClass与您的自定义类名.css呼叫的方式

来源

2011-04-22 01:05:53

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

});

来源

2011-04-22 01:06:21

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

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

来源

2012-08-24 06:42:06

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

回答

相关问题