Change CSS Link Property onClick with Javascript/JQuery?

Question

So for example i have two links:

Link 1
Link 2

<

Answer 1

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>

Answer 2

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

Answer 3

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

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

Answer 4

HTML

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

Script (using 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

Note: The color change will be applied to all anchors 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 .css calls for .addClass and .removeClass with your custom class names.

Answer 5

Your default CSS colour for links should be:

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

Otherwise, using jQuery, you can achieve this with:

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

Coupled with the CSS:

.selectedLink {
    color: #00f;
}

JS Fiddle demo.

Answer 6

Make 2 different classes in css and then swap classes on the links when you click on your link. 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');

});