我正在尝试仅使用键盘创建网站导航。 我在网上搜索并找到了一些示例，但进展甚微。
不，我已达到我的极限，应有的知识。我想获取所选 li/href 的值，以便我可以使用 enter 打开该链接。 到目前为止，这是我的代码示例。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Navigation</title>
<style>
li.selected {
background: yellow
}
a:hover {
color: blue
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul>
<li><a id="link1" href="http://www.bing.de">First Link</a></li>
<li> <a href="http://www.google.de">Second Link</a></li>
<li> <a href="http://www.duckduckgo.com">Third Link</a></li>
</ul>
<script>
var li = $('li');
var liSelected;
$(window).keydown(function(e) {
if (e.which === 40) { //40=Pfeil nach unten
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.next();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
}
} else if (e.which === 38) { //40=Pfeil nach oben
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.last().addClass('selected');
}
} else {
liSelected = li.last().addClass('selected');
}
} else if (e.which === 13) { //13=Enter
//missing code, how to open the selected href link from above
}
});
</script>
</body>
</html>我期待得到一些提示。
谢谢，AxLED
最佳答案
您不需要为 Enter 实际添加事件，但是您可以:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Navigation</title>
<style>
li.selected {
background: yellow
}
a:hover {
color: blue
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul>
<li><a id="link1" href="http://www.bing.de">Bing Link</a></li>
<li> <a href="http://www.google.de">google Link</a></li>
<li> <a href="http://www.duckduckgo.com">Duck Duck Link</a></li>
</ul>
<script>
var li = $('li');
var liSelected;
$(window).keydown(function(e) {
if (e.which === 40) { //40=Pfeil nach unten
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.next();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
}
} else if (e.which === 38) { //40=Pfeil nach oben
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.last().addClass('selected');
}
} else {
liSelected = li.last().addClass('selected');
}
} else if (e.which === 13) { //13=Enter
window.open(liSelected.find("a").attr('href'));
}
});
</script>
</body>
</html>关于css - 使用网站键盘的 Javascript 导航 - 需要帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49678703/