如何重新排列页面中间两个元素的制表符顺序?

How can I reorder the tab order of two elements in the middle of the page?

本文关键字：元素 两个 制表符 顺序 排列 何重新 中间      更新时间：2023-09-26

我有一个动态网页，我需要重新排序内容中两个元素的选项卡顺序。我真的不想为前面的每个元素设置制表符索引来实现这一点。是否有可能为元素分配一个相对于它在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的解决方案

如果不改变tabindex堆栈，就无法解决这个问题。然而，你可以很容易地编写一个小插件，把焦点放在其他地方。但是它很乱，我强烈建议不要这样做。

然而，你可以做的是在上面和下面有一个tabindex堆栈。假设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"/>

这将强制选项卡以正确的顺序遍历DOM。但是，如果您在此过程中包含未tabindex的对象，则它们将获得与第一个块相同的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选项也很混乱，但它更干净(更容易维护)。

在我看来，正确的解决方案是对HTML/DOM中的元素进行排序，使制表符的顺序是您想要的。然后，你可以使用CSS和flex-box按照你想要的视觉显示方式重新排列元素。

根据您想要重新排序的方式，您可以使用例如flex-direction: column-reverse来反转容器中所有元素的顺序，或者您可以使用order属性来打乱单个元素的顺序。下面是执行后一种操作的示例，其中给出第4个元素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>

相关文章：