Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the color of hyperlink after click it [closed]

Tags:

html

css

I want to change the color of the hyperlink after clicking on it, but remaining hyperlinks color are also changed..

CSS

a:active {
    color: gray;
}
a:visited {
    color:black;
}

HTML

<body> 
    <a href="link1.html">a</a>
    <a href="link2.html">b</a>
    <a href="link3.html">c</a> 
</body>
like image 727
Kvk Ganesh Avatar asked Jun 12 '13 09:06

Kvk Ganesh


2 Answers

The :visited pseudo-class works on the browser's history. The fact that all three links are being drawn with the black colour means that your browser has visited them in the past. If you were to clear your history, or change the links' urls, you'll find that they aren't classed as 'visited'.

A link to Stack Overflow will probably show as visited in your browser, but a link to Voice of JIHAD probably shows up a different colour (unless you are a member of the Taliban). Clicking on the unvisited link will change its colour to the visited colour - as defined in Stack Overflow's stylesheets - and will remain 'visited' as long as the page exists in your browser's history.

like image 155
Greg Avatar answered Nov 01 '22 11:11

Greg


Ok, so now you know that :visited works from the browser history, and I think you want to change the color of the clicked link only. I put some jQuery together

$('a').click(function(){
      $(this).addClass("visited");
});

and the CSS

a{
color:#000;
text-decoration:none;
}

a.visited{
color:#205081;
}

Update:

  ....
  ....
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>// import jQuery
  <script>
  enter the script here..
  </script>
  </body>

here is the fiddle

like image 2
lazyprogrammer Avatar answered Nov 01 '22 10:11

lazyprogrammer