Схема для привязки должна отображаться только при переходе по странице

Question

У меня есть метка привязки, и мне нужно отображать контур при переходе по странице и не должен отображаться при нажатии на него. Я использовал следующий код.

a:focus {
  outline: blue dotted 2px;
  outline-offset: 5px!important;
}

<a href="#" tabindex="0">New link</a>

Можно ли удалить контур, нажимая на него? Пожалуйста помоги.

Answer 1

Просто укажите все возможные состояния (по умолчанию, активный, фокусированный) явно.
Состояние является одновременно активным и сфокусированным при нажатии, но только сфокусированным (не активным) при выборе с помощью клавиши табуляции.

a, a:link, a:active, a:hover {
  outline: none;
}
a:focus:not(:active):not(:hover) {
  outline: blue dotted 2px;
  outline-offset: 5px!important;
}

<a href="#" tabindex="1">New link</a><br>
<a href="#" tabindex="2">Another link</a>

Answer 2

$(document).ready(function() {
  $("a").on('click', function(e) {
    e.preventDefault();
    $(this).css("outline", "none");
  });

  $("a").on('focus', function(e) {
    e.preventDefault();
    $(this).css("outline", "blue dotted 2px");
  });

  $("a").on('blur', function(e) {
    e.preventDefault();
    $(this).css("outline", "none");
  });
});

a:focus {
  outline: blue dotted 2px;
  outline-offset: 5px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" tabindex="0">New link</a>