链接颜色变化

Question

I have a link called "Navigation" I want the link colour to change as I click on it and stay changed. For example: Default colour is blue. When I click on the link it goes to another tab and the color turns to green and it should remain green.

here is the code so far:

<style type="text/css"> 
 a.specialAnchor 
{
    font-size: 1em;
    text-align: right;
    padding: 10px;
    padding-right: 15px;
    color: #0066FF;
}
a.specialAnchor:link
{    
color: #0066FF;
}
a.specialAnchor:visited
{    
color: Green;
}
a.specialAnchor:hover 
{
  color:Orange;
  text-decoration:underline;
}
a.specialAnchor:active 
{
 color: Green;
 text-decoration:underline;
}

 <asp:LinkButton ID="Navigation" runat="server" BorderStyle="None" CssClass ="specialAnchor"
                 PostBackUrl="~/navigation.aspx">Navigation</asp:LinkButton>

This does not give me the results I want Please help.

Basically my webpage looks a something like this: there are four tabs: A, Navigation, C, D And in all those four tabs there are links at the bottom of the page. When you are on A and you click on Navigation link, it will take you to Navigation page. What I want is to change the colour of the link when it is clicked on or visited.

Thank you

Answer 1

Have you tried changing the color of the visited pseudo class to green? Try that and see if works the way you want?

Answer 2

Ok, given that you have a link like this

<a class="spec" href="wherever">Link</a>

You need styles like this

<style type="text/css">
.spec:link {color:#FF0000;}    /* unvisited link */
.spec:visited {color:#00FF00;} /* visited link */
.spec:hover {color:#FF00FF;}   /* mouse over link */
.spec:active {color:#0000FF;}  /* selected link */
</style>

Done on the tryit editor at w3schools :)

Answer 3

If changing your :visited pseudoclass doesn't give you what you want, try changing the style onclick with jQuery:

$('a.specialAnchor').click(function() {
    this.style.color = 'green';
}

Answer 4

Try something like this

$(document).ready(function () {
            $('.changecolor').click(function () {
                $(this).css("color", "red");
            });    
        });

<a class="changecolor">Click To Change</a>

If you need to change the color back to what it was, you can use .toggle()