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

问题

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/">Common href, google</a>
</div>

</body>
</html>

回答1:

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.

回答2:

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

回答3:

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.

回答4:

I have encountered the issue I believe this question is asking. Consider this simple example:

style sheet:

#homebox { display: none;}
#contactbox { display: none; }

html:

<a id="#home"></a>
<a href="#home" onclick="return showHideDiv(this);">Show Home</a>
<div id="homebox">Your home</div>
<a id="#contact onclick="return showHideDiv(this);"></a>
<div id="contactbox">Contact Info</div>

script:

function showHideDiv(elem) {
if( elem.style.display && elem.style.display == "none"; ) elem.style.display = "block";
else if( elem.style.display && elem.style.display == "block"; ) elem.style.display = "none";
return true;
}

Although not the most beautiful code, it points out some issues which can develop when using javascript onlick within a href. The reason you might want to do something like this, is to create dynamic content changes without reload which show a visited style. The a links would be handier than buttons, so the visited status of the links is maintained, even though internal. However, I have noticed some issues with browsers triggering visited status on internal links, let alone internal links with javascript onclick event handlers. A button would require coding a function to control visited styles.

回答5:

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
});

来源：https://stackoverflow.com/questions/779722/after-visiting-links-firefox-selectively-skips-state-change-or-avisited-stylin

标签

javascript

firefox

anchor

visited