javascript - 如何使用jquery为具有相似类的网页上的元素设置tabindex

Question

我有多个带有 anchor 标记的元素，如下所示，我试图仅将 tabindex 设置为带有 anchor 标记的元素。下面是代码:

<ul class="level1 static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;">

        <li role="menuitem" class="static" style="position: relative;">
        <a class="level1 static" >program details<span class="visuallyhidden">(Current page)</span></a>
</ul>

提前致谢!

Answer 1

简单，用$("a").attr('tabindex', 0);您将添加/设置 tabindex="0"所有 a元素。

(注意:确保以上代码在所有 <a> 元素加载后运行，对于动态添加的 <a> 元素，只需在新的 <a> 元素加载后再次调用它。)

tabindex

The tabindex attribute is versatile, and it has the capacity to improve or destroy usability for keyboard-only users. When you think about using the tabindex attribute, keep these things in mind:

Use tabindex=0 to include an element in the natural tab order of the content, but remember that an element that is focusable by default may be an easier option than a custom control

Use tabindex=-1 to give an element programmatic focus, but exclude it from the tab order of the content

Avoid using tabindex=1+.

REF: https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

//$("a").attr('tabindex', 0);


$("li.static").each(function(index, elm) {
  $($(elm).find('a')).attr('tabindex', 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="level1 static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;">

  <li role="menuitem" class="static" style="position: relative;">
    <a class="level1 static">program details<span class="visuallyhidden">(Current page)1</span></a><br>
  </li>
  <li role="menuitem" class="static" style="position: relative;">
    <a class="level1 static">program details<span class="visuallyhidden">(Current page)2</span></a><br>
  </li>
  <li role="menuitem" class="static" style="position: relative;">
    <a class="level1 static">program details<span class="visuallyhidden">(Current page)3</span></a><br>
  </li>

</ul>