Question

我有一个带有三个标签的过滤器容器。当前选择的选项卡具有类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();
   }
 }
}

链接到当前小提琴：Link

Answer 1

我根据您提供的代码完成了该任务，并通过一些逻辑对其进行了扩展，以便您有一个可行的示例。在这里http://jsfiddle.net/631zjmcq/

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

要向后移动，我修改了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;
      }
    }
  }
});

使用箭头键将点击事件设置为容器中的下一个标签

1 个答案: