скрытие элементов, когда из фокуса jquery

Question

Я создаю набор ссылок соответствия для пользователей клавиатуры. Цель состоит в том, чтобы отображать только вторую пропущенную ссылку после того, как пункт назначения первой ссылки был сфокусирован (пользователь нажал «пропустить ссылку» и достиг точки назначения href). Следующий код предназначен для обработки этого, но не скрыть второй пропуск, когда первый не имеет фокус

JQuery:

if ($('#anchor').focus) { 
    $('#skip-link-tabs').show(); 
}else { 
    $('#skip-link-tabs').hide(); 
} 

HTML:

<span id="anchor" tabindex="0" style="margin-right:10px">Main</span> 

<a id="skip-link-tabs" href="#toTabs" style="margin-right:10px; color:black;">To tabs</a> 

<span id="toTabs" tabindex="0" style="margin-right:10px">Tabs</span> 

Этот код имеет быть en minimized, чтобы показывать только соответствующие части, так как это довольно большая страница.

Answer 1

focus не является свойством вашего объекта JQuery. Если бы это было так, это все равно не сработало бы, поскольку код не обновляется событием. Так что вам нужно сделать, это проверка на focus события, например:

$('#anchor').focus(function() { 
    $('#skip-link-tabs').show(); 
}); 

focus event

И вы можете скрыть его, делая

$('#anchor').focusout(function() { 
    $('#skip-link-tabs').hide(); 
}); 

focusout event

чекаут Fiddle

Возможно, еще лучше было бы:

var skipLinkTabs = $('#skip-link-tabs'); 
$('#anchor').focus(function() { 
    skipLinkTabs.show(); 
}).focusout(function() { 
    skipLinkTabs.hide(); 
}); 

(Цепной + кэширование элемент JQuery)

Answer 2

Try проверки focus() вместо focus

Answer 3

Следующий код использует фокус, чтобы показать ссылки и размытия, чтобы скрыть при потере фокуса.

$('#anchor').focus(function(e){ 
 
    $('#skip-link-tabs').show(); 
 
}); 
 
$("#anchor").blur(function() { 
 
    $('#skip-link-tabs').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="anchor" tabindex="0" style="margin-right:10px">Main</span> 
 

 
     <a id="skip-link-tabs" href="#toTabs" style="margin-right:10px; color:black;">To tabs</a> 
 

 
    <span id="toTabs" tabindex="0" style="margin-right:10px">Tabs</span>