我没有足够的代表将图像添加到我想要做的事情中,但我会尝试尽可能明确。
我想创造这样的东西 -
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?
答案 0 :(得分:1)
这就像你追求的那样吗?
if($.contains( $('.leftNavigation'), $(':focus')) // left col has focus
else if($.contains( $('.rightNavigation'), $(':focus')) // right col has focus
假设你的列分别有.leftNavigation和.rightNavigation类
答案 1 :(得分:1)
此SO问题可能对您有所帮助 - 向DIV添加选项卡索引可以应用焦点并接受键盘事件。 SO:How Can I Give Focus to a DIV and Attach Keyboard Events