选项卡索引顺序无效

tabindex order not efficent?

本文关键字：无效 顺序 索引 选项      更新时间：2023-09-26

示例：

.HTML 

<a href="#" id="one"></a><br>
<a href="#" id="two"></a><br>
<a href="#" id="three"></a><br>
<a href="#" id="four"></a><br>
<a href="#" id="five"></a><br>
.
.
.
<a href="#" id="amillion"></a><br>

如果我希望在#three链接之前显示#four链接（具有适当的css），我通常还希望通过#three链接之前的选项卡选择它。为此，我需要为tabindex设置整个链接（以及所有其他标签，如果有的话），因此#four和#three将按选项卡的逻辑顺序选择。这没关系，但是如果我必须为某些#909链接进行tabindex怎么办？

对此的解决方案是什么？我在任何地方都找不到它...或者也许还有另一种方法可以做到这一点？

你可以

这样做

.wrap {
  display: flex;
  flex-direction: column;
}
.wrap a {
  order: 4
}
.wrap a:nth-child(-n+4) {
  order: 1
}
.wrap a:nth-child(3) {
  order: 2
}
.wrap a:nth-child(4) {
  order: 3
}
<div class="wrap">
<a href="#" id="one">1</a>
<a href="#" id="two">2</a>
<a href="#" id="four">4</a>
<a href="#" id="three">3</a>
<a href="#" id="five">5</a>
<a href="#" id="ten">10</a>
<a href="#" id="hundred">100</a>
<a href="#" id="thousand">1000</a>
<a href="#" id="tenthousand">10000</a>
<a href="#" id="hundredthousand">100000</a>
<a href="#" id="onemillion">1000000</a>
</div>

2：ND样品，移位10/100

.wrap {
  display: flex;
  flex-direction: column;
}
.wrap a {
  order: 4
}
.wrap a:nth-child(-n+7) {
  order: 1
}
.wrap a:nth-child(6) {
  order: 2
}
.wrap a:nth-child(7) {
  order: 3
}
<div class="wrap">
<a href="#" id="one">1</a>
<a href="#" id="two">2</a>
<a href="#" id="three">3</a>
<a href="#" id="four">4</a>
<a href="#" id="five">5</a>
<a href="#" id="hundred">100</a>
<a href="#" id="ten">10</a>
<a href="#" id="thousand">1000</a>
<a href="#" id="tenthousand">10000</a>
<a href="#" id="hundredthousand">100000</a>
<a href="#" id="onemillion">1000000</a>
</div>

相关文章：