Question

假设我的网页有3个div，其中包含一堆链接。像这样：

<div class="first">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>
<div class="second">
    <input id="link1" type="text"/>
    <input id="link2" type="text"/>
    <input id="link3" type="text"/>
    <input id="link4" type="text"/>
</div>
<div class="third">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>

我希望能够按顺序通过第一个div中的链接进行选项卡，按顺序选择第二个div中的链接（链接1，链接4，链接2，然后链接3），并通过第三个div中的链接按顺序排列。

我已经探索了将tabindex添加到第二个div中的链接，按照我想要的顺序，但由于默认情况下第三个div中所有链接的tabindex为0，因此Tab键顺序为：第一个div中的链接，第三个div中的链接，然后是第二个div中的链接。

我想到的解决方案是将自定义tabindex添加到第二个div的链接，然后将tabindex添加到第三个div中的每个链接（基于偏移量）。这个解决方案似乎很糟糕。

我很想知道是否有一种干净的方法可以做到这一点。谢谢！

Answer 1

我会在一个循环中将tabindex添加到所有输入中，并为第二个div添加附加条件。可能是这样的：

inputs.each(function(i) { 
  if (!$(this).parent().hasClass("second")) {
     $(this).attr('tabindex', i + 1); 
     numstart = i + 1;    
  } else {
    $(this).attr('tabindex', numstart + order[orderindex]); 
    ++orderindex;
  } 
});

通过这种方式，你可以很好地订购它们，并且可以轻松地为第二个div设置订单

https://jsfiddle.net/6nkn8bvj/

编辑div中元素的Tab键顺序，而不将tabindex添加到每个元素

1 个答案: