Altering href with jQuery no longer triggers a:visited style

Question

My SharePoint site needs to preserve the a:visited style defined in CSS for links. I added the following code, which appends "&Source=/" to each href. It seems that by changing the href via jQuery, the browser only "sees" the original href and therefore never triggers the a:visited style as there's no match...

        $("table[class='ms-listviewtable'] td[class='ms-vb2'] a")
            .removeAttr("onclick")
            .attr('href', function(){
             return $(this).attr('href') + '&Source=/'; 
            });

Answer 1

Check out this question/answer:

After visiting links, Firefox selectively skips state change or a:visited styling

Answer 2

Adding the query string parameter makes the browser see it as a completely different URL, one which hasn't been visited. The browser has no way of knowing that the Source parameter doesn't change the destination of the link.

Another thing to look at is how specific your styles are - sometimes "table a" will override "a:visited" so you need "table a:visited"also.

Answer 3

It looks like IE does not support :visited styles on dynamically updated links. I've only tested IE8 but if it doesn't work in the latest version, I don't expect it to work in IE 6/7

IE only supports the most basic scenario where a visitor clicks on a link that navigates to a different page and then clicks the back button to return to the previous page. Only then does the link display its :visited styling.

It works perfectly in Firefox 3 though; links are styled properly even when their href attributes are updated through javascript.

I've created a test page that allows you to try various links and methods: http://jsbin.com/odoqo (editable via http://jsbin.com/odoqo/edit)

Note: I've only used the test page in Firefox 3 and IE 8, it will probably break in IE 6/7