javascript - Tab 键按下忽略隐藏区域 a 和按钮元素

Question

<强> JsBin Link

在上面的链接中，我添加了一些 <div>与 <a>和<button>元素。我有一个右侧栏 div，其中有一些 <a>标签，我在底部有一个页脚。它包含很少<button>元素。

问题是当我通过键盘按 tab 键时，它会聚焦在页脚 div <button>元素。但是，当调用 jQuery 函数时，应该显示页脚 div。按下 Tab 键时不应显示它。同样的问题也出现在右侧栏 div 中。右侧栏 div 包含 <a>标签。当我单击文本“打开右侧 Div”时，应该会显示它。但是，当我按 tab 键时，它也会显示。

我找到了解决此问题的两个解决方案。

1. 如果我添加display: none在页脚和右侧栏类中而不是 bottom: -40px和transform: translateX(100%) .
2. tabindex="-1"将解决对焦问题

我知道上面的两个解决方案可以忽略聚焦隐藏的 div 元素。但是，我无法使用这两种解决方案。就我而言，我的应用程序中有 n 个隐藏 div (隐藏 div 包含 n 个 <a> 和 <button> )。

有没有其他方法可以以编程方式忽略焦点 <a> & <button>当我按 Tab 键时来自隐藏的 div(不是普通的 div)？

Answer 1

<button tabindex="2" >Tab focus 2</button>
<button tabindex="1" >Tab Should not focus</button>
<button tabindex="3" >Tab focus 3</button>
<button tabindex="4" >Tab focus 4</button>
<button tabindex="5" >Tab focus 5</button>

您可以只操作 tabindex 属性来跳过焦点，基本上您从较大的数字开始并继续，并给出较小的没有您想要隐藏表单选项卡焦点的元素

p.s:页面中所有具有聚焦能力的元素都使用tabindex属性