我没有足够的代表将图像添加到我要尝试执行的操作中,但是我将尝试尽可能明确。
我想创建这样的东西-
div "1" selected from left nav, right nav shows A,B,C,D
|'''''''''''''''|''''''''''''''''''''''''''''''''''''''|
| | 1 |
| |'''''''| | |'''''| |'''''| |
| |...1...| | | A | | C | |
| | |.....| |.....| |
| |'''''''| | |
| |...2...| | |
| | |'''''| |'''''| |
| |'''''''| | | B | | D | |
| |...3...| | |.....| |.....| |
| | |
|...............|......................................|
div "2" selected from left nav, right nav shows E,F,G,H
|'''''''''''''''|''''''''''''''''''''''''''''''''''''''|
| | 2 |
| |'''''''| | |'''''| |'''''| |
| |...1...| | | E | | G | |
| | |.....| |.....| |
| |'''''''| | |
| |...2...| | |
| | |'''''| |'''''| |
| |'''''''| | | F | | H | |
| |...3...| | |.....| |.....| |
| | |
|...............|......................................|
我有2个div,leftNavigation和rightNavigation。
leftNavigation有3个div作为按钮。
现在,我只想使用箭头键浏览这个网站。 (上下左右)
我可以使用-捕捉事件
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
break;
case 38: // up
break;
case 39: // right
break;
case 40: // down
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
现在我的问题是-
在同时处理左右导航的情况下如何使用这些键盘事件?
例如当leftNav处于焦点时,向上/向下键应仅从leftNavigation中选择div。
当rightNav成为焦点时,向上/向下键应仅从右侧导航中选择div?
最佳答案
这是您想要的吗?
if($.contains( $('.leftNavigation'), $(':focus')) // left col has focus
else if($.contains( $('.rightNavigation'), $(':focus')) // right col has focus
假设您的列分别具有.leftNavigation和.rightNavigation类