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

I have a d开发者_运维百科ynamic web page, and I need to reorder the tab order of two elements some place in the content. I really don't want to set the tab index for every preceding element to achieve this. Is it possible to assign a tab index to an element relative to it's position in the DOM, thus keep the natural tab order for the rest of the elements?

Give the following elements:

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

The natural tab order here is Link 1, 2, 3, 4, 5. Is it possible to change the tab order to 1, 2, 3, 5, 4 without setting the tab index for 1, 2 and 3 also?

In the real context, I need to rearrange two elements following an expanding menu, so I don't know the numeric value of the tab index.

Solutions based on javascript/jquery are also welcome.

You can't work your way around this without changing the tabindex stack. However, you can pretty easily write a small plugin that takes focus and change it to something else. It's messy, though, and I'd strongly recommend against it.

What you can do, however, is have a tabindex-stack above and below. Say all objects above these items in the DOM could have tabindex 10, and all objects below could have tabindex 30.

For the items you're listing, you could force tab index between 20 and 29. Like this:

Over:

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

Your range:

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

Under:

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

This would force tabbing to go through the DOM in the correct order. However, if you include untabindex'ed objects along the way, they'll get the same tab index as the first block - making everything odd and strange.

If you want to switch the tab index of your range, you can change it accordingly, within the 'buffer range' that you have (20-29 in the example):

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

It's messy as hell.

The jQuery option is messy also, but it's a lot cleaner (and easier to maintain).

The correct solution to this, in my opinion, is to order the elements in your HTML/DOM so that the tab-order is the one you want. Then, you can use CSS and flex-box to reorder the elements the way you want them to display visually.

Depending on how you want to re-order things, you can do that with for example flex-direction: column-reverse, to reverse the order of all elements in a container, or you can use the order attribute to mess with the order of single elements. Here's an example of doing the latter, where giving the 4th element order: 1 makes it show up after all the other elements (which I believe has a default order of 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>