如何修复选项卡导航到弹出窗口(无法聚焦在"app"图标上)？

使用 TAB 我可以专注于绿色、和平和国王元素。但我不能专注于"应用程序"图标。我的意思是焦点跳过"应用程序"图标。没有 JS 如何修复它？

我尝试：focus复选框和lavel，将显示更改为块/内联块。什么都行不通。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pup-up without JS</title>
  <style>
    nav {display: block;}
    label {position: relative;}
    ul {list-style-type: none;}
    .header {margin: 10px;}
    .popUpControl {display: none;}
    .menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    }
    .nav_item {padding-left: 20px;}
    .link {
    text-decoration: none;
    color: #000;
    }
    .link:hover,
    .button_icon:hover,
    .ava:hover {
    opacity: .5;
    cursor: pointer;
    }
    .button_icon > img,
    .ava > img {
    height: 32px;
        width: 32px;
    }
    .popUpControl:focus~.nav_item{outline: 1px solid #2334f0;}
    .link:focus  {outline: 2px solid #2334f0;}
    .popUpControl:checked ~ label > .box {display: block;}
    .box {
    display: none; 
    position: absolute;
    right: -50px;
    top: 40px;
    background: #9ae2f9;
    border-radius: 10px;
    box-shadow: 0 2px 15px #a39494;
    width: 260px;
    height: auto;
    padding: 5px;
    overflow-x: hidden; 
    }
  </style>
</head>
<body>
<header class="header">
  <nav class="nav">
    <ul class="menu">
    <li class="nav_item">
          <a href="#" class="link">Green</a>   
    </li>
    <li class="nav_item">
      <a href="#" class="link">Peace</a>
    </li>
    <li class="nav_item">
      <input type="checkbox" id="popup" class="popUpControl">
          <label for="popup" class="button">
            <span class="button_icon">
          <img src="ico/favicon.ico" alt="ico">
        </span>
        <span class="box">
          Content
        </span>
      </label>
      <span class="arrow"></span>
    </li>
    <li class="nav_item">
      <a href="#" class="ava"><img src="ico/ava.svg" alt="Avatar"></a>
        </li>
      </ul>
  </nav>
</header>
</body>
</html>

需要使用弹出菜单聚焦导航项目。

你需要

一点JavaScript来完成这一点，并在将获得焦点的<label>中添加tabindex="0"。我们需要JavaScript的原因是，尽管能够接收焦点，但<label>本身并没有将 Enter 键转换为单击。我们正在侦听 Enter 键，并在发生这种情况时单击弹出复选框。

const label = document.querySelector('label[for="popup"]');
const popup = document.getElementById("popup");
label.addEventListener("keypress", e => {
  if (e.keyCode === 13) {
    popup.click();
  }
});

nav {
  display: block;
}
label {
  position: relative;
}
ul {
  list-style-type: none;
}
.header {
  margin: 10px;
}
.popUpControl {
  display: none;
}
.menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.nav_item {
  padding-left: 20px;
}
.link {
  text-decoration: none;
  color: #000;
}
.link:hover,
.button_icon:hover,
.ava:hover {
  opacity: 0.5;
  cursor: pointer;
}
.button_icon>img,
.ava>img {
  height: 32px;
  width: 32px;
}
.popUpControl:focus~.nav_item {
  outline: 1px solid #2334f0;
}
.link:focus {
  outline: 2px solid #2334f0;
}
label:focus {
  outline: 2px solid #2334f0;
}
.popUpControl:checked~label>.box {
  display: block;
}
.box {
  display: none;
  position: absolute;
  right: -50px;
  top: 40px;
  background: #9ae2f9;
  border-radius: 10px;
  box-shadow: 0 2px 15px #a39494;
  width: 260px;
  height: auto;
  padding: 5px;
  overflow-x: hidden;
}

<header class="header">
  <nav class="nav">
    <ul class="menu">
      <li class="nav_item">
        <a href="#" class="link">Green</a>
      </li>
      <li class="nav_item">
        <a href="#" class="link">Peace</a>
      </li>
      <li class="nav_item">
        <input type="checkbox" id="popup" class="popUpControl" />
        <label for="popup" class="button" tabindex="0">
              <span class="button_icon">
                <img src="https://placekitten.com/g/100/100" alt="ico" />
              </span>
              <span class="box">
                Content
              </span>
            </label>
        <span class="arrow"></span>
      </li>
      <li class="nav_item">
        <a href="#" class="ava"><img src="ico/ava.svg" alt="Avatar" /></a>
      </li>
    </ul>
  </nav>
  </header>

相关内容

最新更新

热门标签：