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

Question

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

<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); 您将 add/set tabindex="0" 到所有 a 元素。

（注意：确保在加载所有 <a> 元素后上面的代码运行，对于动态添加的 <a> 元素，只需在新的 [=15= 之后再次调用它] 元素已加载。）

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>

Answer 2

可以使用attr(attributeName, function)

$("a").attr('tabindex',function(i) {
  return  i + 1;
});

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

How to set tabindex for elements on webpage with similar class using jquery

html

javascript

asp.net

jquery

tabindex

tabindex