javascript - 矢印キーを使用してコンテナ内の次のタブへのクリック イベントを設定する

Question

3 つのタブを持つフィルター コンテナーがあります。現在選択されているタブのクラスはag-tab-selected. コンテナーが読み込まれると、最初のタブが常に選択され、ag-tab-selectedクラスが表示されます。左右の矢印キーでタブ間を移動できる必要があります。

ユーザーが右矢印キーを押すとag-tab-selected次のタブにクラスが適用され、左矢印キーが押さag-tab-selectedれると前のタブにクラスが適用されます。.click()ユーザーが矢印キーを押したときに、選択されたタブに基づいてビューが変更されるように、現在のタブもそれに適用されている必要があります。現在、使用可能なタブをループして現在のタブにトリガーを適用できますが、矢印キーを使用して前または次への反復に問題があります。

if(e.key === 'ArrowRight') {
 for(let i = 0; i < tabTriggers.length; i++){
   //on arrow, trigger currently focused ag-tab with click
   if(tabTriggers[0].classList.contains('ag-tab-selected') === true){
     tabTriggers[i].click();
   }
 }
}

現在のフィドルへのリンク:リンク