如何在頁面中間重新排列兩個元素的Tab順序？

Question

我有一個動態網頁，我需要重新排列內容中某些位置的兩個元素的Tab順序。我真的不想爲每個前面的元素設置tab索引來實現這一點。是否有可能爲一個元素指定一個相對於它在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的標籤索引？

在真實的情況下，我需要重新排列擴展菜單後的兩個元素，所以我不知道tab索引的數值。

基於javascript/jquery的解決方案也受到歡迎。

Answer 1

在不改變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。但是，如果您在路上包含未綁定對象的對象，則會獲得與第一個塊相同的選項卡索引 - 使所有內容變得古怪而奇怪。

如果你想切換您的範圍內的標籤索引，可以相應地改變它的「緩衝區域」，你有（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選項也是混亂的，但它更清潔（更容易維護）。