Как установить tabindex для элементов на веб-странице с похожим классом, используя jquery

У меня есть несколько элементов с тегом привязки, как показано ниже, я пытаюсь установить 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>

Заранее спасибо!

Источник

2 ответа

Решение

Простой, с $("a").attr('tabindex', 0); вы добавите / установите tabindex="0" все a элемент.

(ПРИМЕЧАНИЕ: убедитесь, что приведенный выше код выполняется после всех ваших <a> элемент загружен, для динамического добавления <a> элемент просто позвоните еще раз после нового <a> элемент загружен.)

TabIndex

Атрибут tabindex является универсальным, и он может улучшить или уничтожить удобство использования для пользователей, работающих только с клавиатуры. Когда вы думаете об использовании атрибута tabindex, помните следующее:

Используйте tabindex=0, чтобы включить элемент в естественный порядок табуляции контента, но помните, что элемент, который может быть сфокусирован по умолчанию, может быть проще, чем пользовательский элемент управления

Используйте tabindex=-1, чтобы придать элементу программный фокус, но исключите его из последовательности вкладок содержимого

Избегайте использования 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>

Источник

Можешь использовать attr(attributeName, function)

$("a").attr('tabindex',function(i) {
  return  i + 1;
});
Источник
Другие вопросы по тегам