使用键盘导航处理两个div。

时间:2013-11-05 05:55:19

标签: javascript jquery html css

我没有足够的代表将图像添加到我想要做的事情中,但我会尝试尽可能明确。

我想创造这样的东西 -

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?

2 个答案:

答案 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