tabindex 为 0 的元素到 tabindex 为 1+ 的下一个元素没有聚焦

Question

我有一个带有<a> 标签集的HTML 模板。为元素添加了 tabindex。

问题在于单击选项卡按钮聚焦，tabindex 1+ 的元素没有聚焦。

要求将焦点从 tabindex 0 的元素更改为 tabindex 1+ 的元素。

<div>
    <ul class="gn-filter-anchor-list">

        <li>
            <a title="Under $25.00" tabindex="0" href="/"><span class="off-screen">from Price</span> Under $25.00</a></li>
        <li>
            <a title="$25.00-$49.00" tabindex="0" href="/"><span class="off-screen">from Price</span> $25.00-$49.00</a></li>
        <li>
            <a title="$50.00-$74.00" tabindex="0" href="/"><span class="off-screen">from Price</span> $50.00-$74.00</a></li>
        <li>
            <a title="$75.00-$99.00" tabindex="0" href="/"><span class="off-screen">from Price</span> $75.00-$99.00</a></li>
        <li>
            <a title="Over $100.00" tabindex="0" href="/"><span class="off-screen">from Price</span> Over $100.00</a></li>
  </ul>
</div>
<div >
    <div class="dept-large"><a href="/" tabindex="2">xxx</a></div>
    <div class="dept-large"><a href="/" tabindex="1">xxx</a></div>
    <div class="dept-large"><a href="/" tabindex="1">xxx</a></div>  
</div>
<div >
    <ul class="pagination" >
        <li class="current"><a href="#" >1</a></li>
        <li class="odd first"><a href="#" >2</a></li>
        <li class="even"><a href="#" >3</a></li>
        <li class="odd"><a href="#" >4</a></li>
    </ul>
</div>

https://jsfiddle.net/sameer_ngl/mjps7ufs/

Answer 1

见下文：

tabindex 全局属性是一个整数，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果可以，在什么位置。它可以取多个值：

• 负值表示元素应该是可聚焦的，但是 不应通过顺序键盘导航访问；
• 0 表示该元素应该可以通过 顺序键盘导航，但其相对顺序已定义 根据平台公约；
• 正值表示应该可以通过以下方式获得焦点和访问 顺序键盘导航；它的相对顺序定义为 属性值：顺序跟随递增 tabindex 的编号。如果几个元素共享相同的 tabindex，它们的相对顺序遵循它们在中的相对位置 文件。

按顺序键盘导航顺序，应将具有 0 值、无效值或没有 tabindex 值的元素放在具有正 tabindex 值的元素之后。

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex