Question

我想使用 display：flex 来更改行类的div的顺序，但我想保持这个TAB导航顺序：A→B→C→D。

正如您在片段中看到的，第一个示例正常工作（DOM序列与Order相同），但在第二个示例中，该选项卡遵循DOM序列。

没有使用javascript的机会吗？

.container {
  display: flex;
  flex-direction: column;
}

.line {
  padding: 5px;
  border: 1px solid gray;
  margin-bottom: 5px;
}

.line span {
  margin-left: 7px;
}

<h2>
  Tabbing navigation OK
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div>
</div>

<h2>
  Tabbing navigation KO
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 4;"><input value="C"><span>2nd div - Order: 4</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>4th div - Order: 2</span></div>
</div>

JSFiddle链接here。

提前致谢

Answer 1

您可以使用tabindex html属性

＆＃13;

.container {
  display: flex;
  flex-direction: column;
}

.line {
  padding: 5px;
  border: 1px solid gray;
  margin-bottom: 5px;
}

.line span {
  margin-left: 7px;
}

＆＃13;

<h2>
  Tabbing navigation OK
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div>
</div>

<h2>
  Tabbing navigation KO
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A" tabindex="1"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 4;"><input value="C" tabindex="4"><span>2nd div - Order: 4</span></div>
  <div class="line" style="order: 3;"><input value="C" tabindex="3"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 2;"><input value="B" tabindex="2"><span>4th div - Order: 2</span></div>
</div>

＆＃13;

Answer 2

目前没有通过css更改视觉顺序的好方法，无论是通过使用flex还是浮动内容并仍然保持Tab键顺序。

当页面上有许多其他字段时，分配tabindex属性会导致不应出现的维护问题。 Opera应该将标签索引分配为页面上的项目流，当前没有其他浏览器。

Answer 3

如果您想更改标签顺序，只需添加tabindex =＆＃34; x＆＃34;你的div。

https://www.w3schools.com/tags/att_global_tabindex.asp

Flexbox订单和标签导航

3 个答案: