Question

我正在为键盘用户构建一组合规性链接。目标是仅在第一个链接的目的地成为焦点后才显示第二个跳过链接（用户点击了＆＃34;跳过链接并且它已到达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()而不是focus

Answer 2

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

在焦点jquery时隐藏元素

3 个答案: