如何重新排列页面中间两个元素的选项卡顺序？

Question

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

给定以下元素：

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

这里的自然标签顺序是链接1、2、3、4、5。是否可以将标签顺序更改为1、2、3、5、4，而不必为1、2和3设置标签索引？

在实际情况中，我需要重新排列一个扩展菜单后面的两个元素，因此我不知道标签索引的数值。

基于javascript/jquery的解决方案也可以接受。

- Jørgen

---

这个问题缺乏必要的细节。 - undefined

我添加了一个示例并尝试进行了澄清。希望能有所帮助 :) - undefined

Answer 1

如果不改变tabindex堆栈，你无法绕过这个问题。但是，你可以很容易地编写一个小插件，将焦点转移到其他地方。虽然有些混乱，但我强烈建议不要这样做。

然而，你可以在上面和下面设置一个tabindex堆栈。比如说，在DOM中所有这些项目上面的对象都可以有tabindex 10，下面的对象都可以有tabindex 30。

对于你列出的项目，你可以强制将tabindex设置在20到29之间。像这样：

Over:

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

这将强制制表符按正确顺序通过DOM。但是，如果您沿途包括未标记为制表符的对象，则它们将获得与第一个块相同的制表符索引 - 使一切变得奇怪和奇特。

如果您想切换范围的制表符索引，可以根据需要进行更改，在您拥有的“缓冲区范围”内（例如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选项也有点乱，但它更加简洁（而且易于维护）。

- hnilsen

Answer 2

在我看来，解决这个问题的正确方法是按照你想要的选项对HTML/DOM中的元素进行排序。然后，您可以使用CSS和flex-box将元素重新排序以使其在视觉上显示为所需的方式。

根据您想要重新排序的方式，您可以使用例如flex-direction: column-reverse来反转容器中所有元素的顺序，或者您可以使用order属性来更改单个元素的顺序。以下是一个示例，其中将第四个元素赋予order: 1，使其在所有其他元素之后显示（我认为默认顺序为0）。

nav {
  display: flex;
  flex-direction: column;
}

<nav>
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  <a href="#" style="order: 1">Link5</a>
  <a href="#">Link4</a>
</nav>

- Svish