Geek Answers Handbook

After visiting links, Firefox selectively skips the state change or: visited style

After clicking the link with a common href (local page or website) and href successfully loaded, both FF2 and IE7 link with: visited style are displayed.

For links with href = "javascript: anyfunc ()", IE7 works as described above while FF2 does not display: visited style. Without any changes to DOCTYPE.

Q: Is the behavior with JS links and: visited considered correct?

Q: Does FF2 leave the binding state unchanged after clicking on the JS link?

Q: Without having to bind the onClick handler or change classes / style with JS, is there a compressed way to tell FF2 to use: visted does not depend on whether href is another page or JS link?

Example:

<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>
+2
source share
5 answers

It would be difficult to create these types of links ... although they can have the same href, they can potentially do something through JS (which can make it look like it won't visit it).

Is there a way to link something like an HTML page and attach event handlers to the link (and return false to stop the link)? And if the links are actually JS hooks, I would use an element like <button> , and accordingly its style ... do not forget to add cursor: pointer so that the end user knows that it is available for click.

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

+1
source

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

+1
source

Here is my trick:

Q: Is the behavior with JS links and: visited considered correct?

The purpose of the link is to get the resource. If your link doesn’t go anywhere, what do you “visit”? In my opinion, the behavior from this point of view is correct.

Q: Does FF2 leave the binding state unchanged after clicking on the JS link?

It does not seem to change the state of the link to: visited, if it does not point to an element on the page (this means that the link points to the current page that is implicitly visited) or to another resource that is already available.

Q: Without having to bind the onClick handler or modify the classes / style using JS, is there a short way to tell FF2 to use: visted styling regardless of whether href is another page or JS link?

I do not think so. You can probably get the effect of visiting if you specify href links to "#" and use the onclick handler for your JavaScript needs.

+1
source

I ran into a problem, I believe this question asks a question. 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 this is not the most beautiful code, it points out some problems that may occur when using javascript onlick inside href. The reason you might need to do something similar is to create dynamic content changes without reloading that show the style of the visit. Links would be more convenient than buttons, so the supported status of links is supported, albeit internally. However, I noticed some problems with browsers that trigger visit status via internal links, not to mention internal links with onclick javascript event handlers. The button will require an encoding function to control visited styles.

+1
source

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

If you want to attach some JS function to the link, you definitely need to use unobtrusive JS to attach this function to the click event.

EG using jQuery:

 $("#myLinkID").click(function () { //function stuff });
0
source

More articles:


All Articles