Change the color of the anchor when pressed

Question

I want that when clicking on this link its color will change to the given color

<li id="press"><a href="<?=base_url()?>index.php/page/press">Press</a></li> 

Answer 1

The CSS :active declaration will do what you need. 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 to be effective!

Answer 2

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

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

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

Answer 3

Here is a Css example for a visited hyperlink

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

Hope this helps.

Answer 4

You can accomplish this on the server side using PHP or using JS.

With PHP, all you need to do is add a specific class name to the link after clicking. very simple example:

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

and CSS:

 .selected { color: #FF0000; } 

If you want to do this using JS and you are using some kind of JS Framework, just search the framework site for “How to add an event” and “How to add a class name”, and then combine what you learn from the search results.

If, by coincidence, you are 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>