在HTML中将焦点环添加到菜单项可以通过以下步骤实现:
<ul>
和<li>
标签创建菜单结构。例如:<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
:focus
伪类选择器来定义焦点样式。例如:li:focus {
outline: 2px solid blue;
}
上述代码将在菜单项获得焦点时添加一个蓝色的2像素边框。
const menuItems = document.querySelectorAll('li');
menuItems.forEach((item, index) => {
item.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') {
event.preventDefault();
if (index > 0) {
menuItems[index - 1].focus();
}
} else if (event.key === 'ArrowDown') {
event.preventDefault();
if (index < menuItems.length - 1) {
menuItems[index + 1].focus();
}
}
});
});
上述代码将监听菜单项的键盘事件,当按下向上箭头键时,焦点切换到上一个菜单项;当按下向下箭头键时,焦点切换到下一个菜单项。
通过以上步骤,你可以在HTML中将焦点环添加到菜单项,并实现键盘导航功能。
领取专属 10元无门槛券
手把手带您无忧上云