Change CSS Link Property onClick with Javascript/JQuery?

Question

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.

I currently have a default CSS property for links:

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?

daryl · Accepted Answer · 2012-07-18T15:29:54.347

9

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/

edited Jul 18 '12 at 15:29

answered Apr 22 '11 at 01:05

daryl

14,307
21
67
92

score 3 · Answer 2 · answered Apr 22 '11 at 01:05

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.

score 2 · Answer 3 · answered Aug 24 '12 at 06:42

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>

score 0 · Answer 4 · edited Apr 22 '11 at 01:00

0

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

edited Apr 22 '11 at 01:00

Chandu

81,493
19
133
134

answered Apr 22 '11 at 00:59

user719631

1
2

score 0 · Answer 5 · edited Apr 22 '11 at 01:08

0

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

edited Apr 22 '11 at 01:08

Chandu

81,493
19
133
134

answered Apr 22 '11 at 01:01

Sachin Nayak

1,041
9
17

score 0 · Answer 6 · answered Apr 22 '11 at 01:03

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.

score 0 · Answer 7 · answered Apr 22 '11 at 01:06

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

});

Change CSS Link Property onClick with Javascript/JQuery?

7 Answers7

Linked