How to unselect a link using jquery

Question

Its a bit difficult to explain, but i will try.

Whenever someone clicks on a anchor link, temporarly a dotted box appears around it. For example, when u click on the stackoverflow logo over the top of this page, it is surrounded by a dotted line temporarily. Because the page gets refreshed, the dotted box goes away.

But with ajax, the link doesnt get refresh, hence the dotted box remains on it. How to remove that dotted box. When you click somewhere on the page the dotted box goes away. How to do it using jquery or any other way.

Answer 1

To un-select it you can trigger the blur event on the anchor element, for example:

$('a').click(function () {
  this.blur(); // or $(this).blur();
  //...  
});

element.blur() will remove the keyboard focus from the current element.

Answer 2

That box is the focus. You could try doing this:

$("#mylink").blur();

so:

$("#mylink").click(function() {
  $.ajax({...});
  $(this).blur();
  return false;
});

Answer 3

Don't use jQuery or JavaScript to fix this. You can remove it by using straight CSS. Just be careful as it is a usability feature:

In your CSS stylesheet (all elements):

/* Disable all focus styles */
:focus { outline: 0; }

In CSS (targeted link):

#mylink:focus { outline: 0; }

The problem with the blur() solutions is the focus rectangle flickers on then off immediately.