使用箭头键将单击事件设置为容器中的下一个选项卡

Question

我有一个带有三个选项卡的过滤器容器。当前选择的选项卡有 class ag-tab-selected。当容器加载时，第一个选项卡始终处于选中状态并且具有 ag-tab-selected class。我需要能够使用左右箭头键在选项卡之间导航。

当用户按下右箭头键时，ag-tab-selected class 应应用于下一个选项卡，如果按下左箭头键，ag-tab-selected class 应该应用于上一个选项卡。当前选项卡也应该应用 .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();
   }
 }
}

Link 到当前 fiddle：Link

Answer 1

我根据你提供的代码完成了任务，我还用一些逻辑扩展了它，这样你就有了一个工作示例。可在此处获得 http://jsfiddle.net/631zjmcq/

所以我为每个选项卡定义了一个点击处理程序，以便您获得一些交互性（我想看看实际的解决方案）您提供的代码的基础运行良好，只是有一个问题，即一旦您找到一个元素，您就不会停止循环并且运行直到它到达列表中的最后一个元素。这意味着它会点击每个元素，直到它到达最后一个元素，所以我在那个 for 循环中放了一个 break 语句。

为了向后，我修改了for循环，所以这次它会从列表的末尾向后循环。

const selectedTabClass = 'ag-tab-selected';

document.querySelectorAll('.ag-tab').forEach(tab => {
    tab.addEventListener('click', e => {
    if (tab.classList.contains('ag-tab-selected')) return

    document.querySelector(`.${selectedTabClass}`)
        .classList.remove(selectedTabClass)
        tab.classList.add(selectedTabClass)
  })
})

document.addEventListener('keydown', e => {
  let tabTriggers = document.querySelectorAll('.ag-tab');

  if (e.key === 'ArrowRight') {
    for (let i = 0; i < tabTriggers.length; i++) {
      if (tabTriggers[i].classList.contains('ag-tab-selected') === true) {
        tabTriggers[i+1].click();
        break;
      }
    }
  }

  if (e.key === 'ArrowLeft') {
    for (let i = tabTriggers.length-1; i > 0; i--) {
      if (tabTriggers[i].classList.contains('ag-tab-selected') === true) {
        tabTriggers[i-1].click();
        break;
      }
    }
  }
});

使用箭头键将单击事件设置为容器中的下一个选项卡

Setting click event to next tab in container with arrow keys

javascript

accessibility

keyboard-events

web-accessibility