3

我没有足够的代表来为我正在尝试做的事情添加图像，但我会尽可能明确。

我想创造这样的东西 -

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？

4

2 回答 2

1

这和你追求的一样吗？

if($.contains( $('.leftNavigation'), $(':focus')) // left col has focus
else if($.contains( $('.rightNavigation'), $(':focus')) // right col has focus

假设您的列分别具有类 .leftNavigation 和 .rightNavigation

于 2013-11-05T05:59:47.580 回答
1

这个 SO question 可能会对您有所帮助 - 向 DIV 添加选项卡索引允许应用焦点并接受键盘事件。 SO：如何将焦点放在 DIV 上并附加键盘事件

于 2013-11-05T08:38:53.753 回答