Question

The question has gotten rewritten.

An Example:

Here is an example HTML page: http://jsfiddle.net/mwMzD/2/

The Question:

When the Third Page link is selected, and the page is rendered, then the selected anchor tag should still keep the color "white", and not revert back to "grey" (a:visited).

Notice: Do keep in mind that a:visited applies to every visited anchor tag, and not just the last selected anchor tag.

Which methods are needed for this with jQuery?

Answer 1

You need to apply a CSS class to the Third Page link when that page is rendered.

<%= link_to "Third Page", route_to_third_page_path, class: "active" if current_page?(route_to_third_page_path) %>

You’d then add this .active class to your a:active selctor

a:link { color: grey; }
a:visited { color: grey; }
a:hover { color: white; }
a:active, a.active { color: white; }

Now, when the Third Page renders, the .active class will be applied to the link, causing it to take on the same style as a:active.

---

Edit Now that you’ve completely rewritten your question

Please see: http://jsfiddle.net/h67Ec/

Here is the jQuery

$(function(){
    $('a').click(function(){
      $('a').removeClass('active');
      $(this).addClass('active')
    });        
});​

and the styling from my original answer (see above) still applies.