2

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

Improve this question

4 Answers 4

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

It does not work. Is there any other way I can perform the operation?
Do your anchor tags have href values? The :visited pseudoclass will only work if the address specified in the href exists in the browser's history, or if the href contains a hash reference (i.e: #something or simply #). I should note all links with the same href will appear as :visited if their referenced link exists in the history.
<asp:LinkButton ID="Navigation" runat="server" BorderStyle="None" CssClass ="specialAnchor" PostBackUrl="~/navigation.aspx">Navigation</asp:LinkButton>
Your visited style should just read ".specialAnchor:visited" followed by the stuff in braces, hope you got it sorted :)
Also you should use the inspect element feature on Google Chrome or firebug to help you undertand what a link button looks like in html at runtime
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 :)

Improve this answer

5 Comments

I already tried that. I mistakenly put orange instead of Green in the description. Anyway, it does not work
Take a look at w3schools.com/css/css_pseudo_classes.asp it will let you try out different ways.
Basically the the pseudo clases (visited, hover etc) applies to the spec class. Your syntax is nearly right except that you dont need to associate the class (specialAnchor) to the element (a), and anyway if you did it should read "a specialAnchor" without the dot in between :)
I did it every way. But I am getting the same results as I was getting before.
Why not put your markup for the link into your question, also see Aaron's comment about having an href that exists.
1

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'; }
Improve this answer

Comments

1

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()

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.