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

使用tabindex 0到tabintdex 1+的下一个元素的元素没有聚焦

1 个答案: