javascript - 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>

此代码已被最小化以仅显示相关部分，因为这是一个相当大的页面。

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 元素)