1

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

链接到当前小提琴：链接

4

1 回答 1

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;
      }
    }
  }
});
于 2018-08-14T18:31:26.427 回答