I want to change the color of the hyperlink after clicking on it, but remaining hyperlinks color are also changed..
a:active {
color: gray;
}
a:visited {
color:black;
}
<body>
<a href="link1.html">a</a>
<a href="link2.html">b</a>
<a href="link3.html">c</a>
</body>
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With