Change Color Of An Anchor When Clicked

i want that when i click this link its color changes to the given color

Press

Solution 1:

The CSS declaration :active will accomplish what you're after. http://www.w3schools.com/CSS/pr_pseudo_active.asp

Example.

a:active {
    color: #C00;
}

NB.

a:active MUST come after a:hover in the CSS definition in order to be effective!

Solution 2:

Here is the sample Css for the visited hyperlink

a:link {color:#FF0000}    
a:visited{color:Red}

Hope that will help.

Solution 3:

All links? a:focus { color: orange; }

Some links? Give them a class, eg <a class="foo" ...>: a.foo:focus { color: purple; }

One link? Give it an id, eg <a id="bar" ...>: a#bar:focus { color: #BADA55; }

Solution 4:

You can accomplish that at server-side with PHP or with JS.

With PHP all you need is to added a given classname to the link once clicked. a very simple example would be:

<a href="myURL" class="<?php if(ExpressionToDetermineIfLinkIsClicked) echo 'selected'; ?>">

and CSS:

.selected { color: #FF0000; }

If you would like to do it with JS , and you are using any JS Framework just search the frameworks' site for "How to add an event" & "How to add classname" then combine what you get to know from the search results.

If you are, by coincidence, using prototype.js framework, then you can try the following:

function selectLink(link){
  link.addClassName('selected');

  var otherLinks = link.siblings();

  for(var i = 0; i < otherLinks.lenght; i++){
     otherLinks[i].removeClassName('selected');     
  }

}

document.observe('dom:loaded', function(){
    $('menu').observe('click', function(event){
       event.stop();
       var link = Event.element(event); 
       selectLink(link);
       });
    });

---
<div id="menu">
<a href="url1" id="link1" class="">
<a href="url2" id="link2" class="">
<a href="url3" id="link3" class="">
</div>