views:

813

answers:

4

After clicking a link with a common href (local page or web-site) and the href is successfully loaded, both FF2 and IE7 will display the link with a:visited styling.

For links with href="javascript:anyfunc()", IE7 works as above while FF2 does not display a:visited styling. No change with any DOCTYPE.

Q: Is either behaviour with JS links and :visited considered correct?

Q: Does FF2 leave anchor state unchanged after clicking a JS link?

Q: Without having to attach an onClick handler or modify classes/style with JS, is there a concise way to tell FF2 to use :visted styling independent of whether href is another page or a JS link?

Example follows:

<html>
<head>
<style>
div.links { font-size: 18px; }
div.links a { color: black; text-decoration: none; }

div.links a:visited { background-color: purple; color: yellow; }
div.links a:hover { background-color: yellow; color: black; }
</style>

<script>
function tfunc(info) { alert("tfunc: info = " + info) }
</script>
</head>
<body>

<div class="links">
    <a href="javascript:tfunc(10)">JS Link 1</a><br>
    <a href="javascript:tfunc(20)">JS Link 2</a><br>
    <a href="http://www.google.com/"&gt;Common href, google</a>
</div>

</body>
</html>
+1  A: 

It would be difficult to style these sorts of links... whilst they may have the same href, they could potentially do anything through JS (which may make it seem that visiting it would not).

Is there a way to link to something such as a HTML page and attach event handlers to the link (and return false to stop the link clicking through)? And if the links are in fact JS hooks, I would use an element such as a <button> and style it accordingly... remember to add cursor: pointer so the end user knows it is clickable.

Using inline javascript:function(something) in a href is bad practice. Try unobtrusive event handlers.

alex
A: 

I agree with Alex, a link should be a link to something, not a JS trigger - a button would much more effective here.

If you do want to attach some JS function to a link, you should definitely use some unobtrusive JS to attach that function to the click event.

EG using jQuery:

$("#myLinkID").click(function () { 
  //function stuff
});
Ben
+1  A: 

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!

DaDa
+1  A: 

Here's my take:

Q: Is either behaviour with JS links and :visited considered correct?

The purpose of a link is to retrieve a resource. If your link doesn't go anywhere, what are you "visiting"? The behavior is correct from this perspective in my opinion.

Q: Does FF2 leave anchor state unchanged after clicking a JS link?

It seems as though it doesn't change the state of the link to :visited unless it points to an element in the page (which means the link points to the current page which is implicitly visited) or to another resource which as already been accessed.

Q: Without having to attach an onClick handler or modify classes/style with JS, is there a concise way to tell FF2 to use :visted styling independent of whether href is another page or a JS link?

I don't think so. You can probably get the visited effect if you point the href of the link to "#" and use the onclick handler for your JavaScript needs.

Zack Mulgrew