Javascript-如何使用键盘箭头键更改列表中链接的焦点
当链接没有包装在其他元素中时,我能够改变焦点 这项工作: HTML 但是,当链接位于列表中时,我如何实现同样的效果呢?像这样Javascript-如何使用键盘箭头键更改列表中链接的焦点,javascript,jquery,html,navigation,focus,Javascript,Jquery,Html,Navigation,Focus,当链接没有包装在其他元素中时,我能够改变焦点 这项工作: HTML 但是,当链接位于列表中时,我如何实现同样的效果呢?像这样 <ul> <li> <a id="first" href="#" class='move'>Link</a> </li> <li> <a href="#" class='move'>Link</a> </l
<ul>
<li>
<a id="first" href="#" class='move'>Link</a>
</li>
<li>
<a href="#" class='move'>Link</a>
</li>
<li>
<a href="#" class='move'>Link</a>
</li>
</ul>
-
-
-
您可以使用.closest()查找父元素,然后使用.next()获取下一个li,然后使用.find()获取下一个.move
if (e.keyCode == 40) {
$(".move:focus").closest('li').next().find('a.move').focus();
}
// Up key
if (e.keyCode == 38) {
$(".move:focus").closest('li').prev().find('a.move').focus();
}
如果您恰好想在到达列表末尾时循环聚焦,您可以执行以下操作:
var $li = $('li'),
$move = $(".move").click(function () {
this.focus();
});
$(document).keydown(function(e) {
if (e.keyCode == 40 || e.keyCode == 38) {
var inc = e.keyCode == 40 ? 1 : -1,
move = $move.filter(":focus").parent('li').index() + inc;
$li.eq(move % $li.length).find('.move').focus();
}
});
$move.filter(':first').focus();
演示:
if (e.keyCode == 40) {
$(".move:focus").closest('li').next().find('a.move').focus();
}
// Up key
if (e.keyCode == 38) {
$(".move:focus").closest('li').prev().find('a.move').focus();
}
if (e.keyCode == 40) {
$(".move:focus").parent().next().find('a').focus();
}
if (e.keyCode == 38) {
$(".move:focus").parent().prev().find('a').focus();
}
var $li = $('li'),
$move = $(".move").click(function () {
this.focus();
});
$(document).keydown(function(e) {
if (e.keyCode == 40 || e.keyCode == 38) {
var inc = e.keyCode == 40 ? 1 : -1,
move = $move.filter(":focus").parent('li').index() + inc;
$li.eq(move % $li.length).find('.move').focus();
}
});
$move.filter(':first').focus();