javascript - 如何重新排列页面中间两个元素的 Tab 键顺序？

Question

我有一个动态网页，我需要重新排列内容中某处两个元素的制表符顺序。我真的不想为每个前面的元素设置选项卡索引来实现这一点。是否可以根据元素在 DOM 中的位置为其分配制表符索引，从而为其余元素保持自然制表符顺序？

给出以下元素:

<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
<a>Link5</a>

这里的自然 Tab 键顺序是链接 1、2、3、4、5。是否可以将 Tab 键顺序更改为 1、2、3、5、4 而无需同时为 1、2 和 3 设置 Tab 键索引？

在实际上下文中，我需要重新排列展开菜单后的两个元素，所以我不知道选项卡索引的数值。

也欢迎基于 javascript/jquery 的解决方案。

Answer 1

如果不更改 tabindex 堆栈，您将无法解决这个问题。但是，您可以很容易地编写一个小插件来获取焦点并将其更改为其他内容。不过，这很困惑，我强烈建议不要这样做。

然而，您可以做的是在上方和下方设置一个 tabindex-stack。假设 DOM 中这些项目之上的所有对象都可以有 tabindex 10，而下面的所有对象都可以有 tabindex 30。

对于您列出的项目，您可以强制将标签索引设置在 20 到 29 之间。像这样:

结束:

<div></div>
<div></div>
<div></div>
<div></div>

你的范围:

<a tabindex="20">Link1</a>
<a tabindex="20">Link2</a>
<a tabindex="20">Link3</a>
<a tabindex="20">Link4</a>
<a tabindex="20">Link5</a>

下:

<domobject tabindex="30"/>
<domobject tabindex="30"/>
<domobject tabindex="30"/>
<domobject tabindex="30"/>

这将强制 Tab 键以正确的顺序通过 DOM。但是，如果您在此过程中包含未使用 tabindex 的对象，它们将获得与第一个 block 相同的 tab 索引 - 使一切变得奇怪和奇怪。

如果您想切换范围的标签索引，您可以在您拥有的“缓冲区范围”(示例中为 20-29)内相应地更改它:

<a tabindex="25">Link1</a>
<a tabindex="24">Link2</a>
<a tabindex="23">Link3</a>
<a tabindex="22">Link4</a>
<a tabindex="21">Link5</a>

真是乱七八糟。

jQuery 选项也很困惑，但它更简洁(并且更易于维护)。