在键盘中反应导航选项卡 - Javascript

随着Web应用程序变得越来越复杂，页面上的导航选项卡也越来越多。当我们使用鼠标点击这些选项卡时，它们能够很好的工作。但是，当使用键盘导航时，它们可能无法正常工作。因此，在本文中，我们将介绍如何使用JavaScript在键盘上使导航选项卡反应。

目录

• HTML结构
• Javascript实现
• 结论

HTML结构

首先，我们需要定义页面上的导航选项卡，这些选项卡通常是链接或按钮，我们可以将这些选项卡放在一个<nav>标签中。

<nav>
  <a href="#" class="active">选项卡1</a>
  <a href="#">选项卡2</a>
  <a href="#">选项卡3</a>
</nav>

我们需要为当前选中的选项卡添加一个active类，以突出显示其为当前活动选项卡。

Javascript实现

我们将使用Javascript来监听键盘输入事件，以控制导航选项卡。以下是实现的步骤：

1. 在页面加载时，将焦点设置在导航选项卡上。
2. 监听键盘输入事件，如果用户按下左、右方向键，则选中前一个或后一个选项卡并且更新对应的样式。
3. 如果用户按下Tab键，则将焦点设置在下一个元素上。

下面是完整的Javascript代码：

const nav = document.querySelector("nav");
const tabs = nav.querySelectorAll("a");
let selectedTab = 0;

// 设置焦点在导航选项卡上
nav.setAttribute("tabindex", "0");
nav.addEventListener("focus", e => {
  tabs[selectedTab].classList.add("active");
});

// 监听键盘输入事件
nav.addEventListener("keydown", e => {
  tabs[selectedTab].classList.remove("active");

  // 按下左方向键
  if (e.keyCode === 37) {
    selectedTab--;
    if (selectedTab < 0) selectedTab = tabs.length - 1;
  }
  // 按下右方向键
  else if (e.keyCode === 39) {
    selectedTab++;
    if (selectedTab >= tabs.length) selectedTab = 0;
  }
  // 按下Tab键
  else if (e.keyCode === 9) {
    return;
  }

  tabs[selectedTab].classList.add("active");
  e.preventDefault();
});

// 将焦点设置在下一个元素上
nav.addEventListener("keyup", e => {
  if (e.keyCode === 9) {
    tabs[selectedTab].classList.remove("active");
  }
});

首先，我们在页面加载后将焦点设置在导航选项卡上。在focus事件中，我们将第一个选项卡标记为当前选中的选项卡。

然后，我们在keydown事件中，监听左、右方向键和Tab键的按下。如果用户按下左、右方向键，则将选中前一个或后一个选项卡，并更新选项卡的样式。如果按下Tab键，则不执行任何操作。

最后，我们在keyup事件中，设置Tab键后，将焦点设置在下一个元素上。

结论

在本文中，我们演示了如何使用Javascript在键盘上使导航选项卡反应。我们通过监听键盘输入事件，实现了在键盘上控制导航选项卡的功能。这将使得应用程序更加易用，并可以为不同类型的用户提供更多的选择。