Learning jQuery

With all the fun new things you can do using jQuery and other JavaScript libraries, people are using links ("a" tags) for much more than sending users to a different page. One little annoyance I've found when using links for these events, though, is the little dotted outline that appears around the linked words upon clicking them and making them "active."

It makes sense to see the outline when clicking, but I don't want it to stay there.

In Firefox 1.5 and up, it's easy to get rid of the outline with a little CSS:

[css]a:focus, a:active { outline: none; }[/css]

Unfortunately, that doesn't work in Internet Explorer 6 and below (is anyone surprised?).

Wouldn't it be nice to get rid of the outline in every browser (as long as JavaScript is enabled, of course)?

jQuery to the Rescue

The trick is to take the focus off the link once it has been clicked, and jQuery makes that simple. In the jQuery Discussion List, Klaus Hartl offered this snippet, which works perfectly:

[js]$('a').click(function() { this.blur(); });[/js]

Or, if you wanted to apply the blur only to links inside a DIV with an ID of "magic," for example, you could replace $('a') with $('#magic a'). If the blur should apply only to links with a class of "fun," the selector would change to $('a.fun'). See how easy? Give it a try:

click me and I won't show the ugly dotted outline

For this little demo, I gave the link a class of "fun" and put the above jQuery code inside $(document).ready() (For more on $(document).ready(), see Introducing $(document).ready() ). I also added return false; because I didn't want the link to take you anywhere.