35

tabindexすべてのフォーム要素に追加したいと思います。フォームは動的で、HTML に追加できません。関数として実行したいと思います。

同じ名前のラジオ ボタンが複数ある場合は、それぞれに独自のtabindex値が必要です。ページ上のフォーム要素のほとんどは<input>、 を除いて として始まります<select>。どうすればそれを説明できますか？

ループを実行して属性を追加する必要があると思いますよね？

var n = 1; 

$('input, select').each(function() {               
    $(this).attr('tabindex', n++);
});
4

4 に答える 4

54

奇妙な質問ですが、はい、それが基本的な考え方です。

$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });

これは:inputを使用して、ボタンとテキスト領域を含むすべてを取得します。:not(:hidden)不要なタブを避けるために、非表示の入力を除外するだけです。

于 2013-02-27T22:05:30.417 に答える
-1

ここでは、aria-selected と tabindex の値を jquery 経由で動的に追加する方法を説明しました。また、アクセシビリティが tablist、tab、および tabpanel ロールでどのように機能するか、および aria 属性がどのように機能するかを確認したいと思います.Hope はこのコードに役立ちます:

 var $tabs = $('.tabs');
 var $panels = $('.panel');

 $tabs.on('click', 'a', function (e) {
 e.preventDefault();
  var id = $(this).attr('href');

  // Find the currently visible tab and panel and hide them
$tabs.find('[aria-selected="true"]').attr({
            'aria-selected': false,
            'tabindex': -1
        });
   $(this).attr({
            'aria-selected': true,
            'tabindex': 0
        });
});

タブラッパー:-

<ul class="tabs" role="tablist">
  <li role="presentation"><a href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a></li>
  <li role="presentation"><a href="#tab-2" role="tab" aria-controls="tab-2">Tab 2</a></li>
  <li role="presentation"><a href="#tab-3" role="tab" aria-controls="tab-3">Tab 3</a></li>
</ul>

<div class="tab-panels">
  <div class="panel" id="tab-1" role="tabpanel" aria-hidden="false">…&lt;/div>
  <div class="panel" id="tab-2" role="tabpanel" aria-hidden="true">…&lt;/div>
  <div class="panel" id="tab-3" role="tabpanel" aria-hidden="true">…&lt;/div>
</div>
于 2021-02-19T11:38:55.163 に答える