Question

我试图了解使用键在网站上导航的概念。

作为练习，我只使用箭头键导航一个简单的页面。到目前为止，我能够获取上下键的keyCodes并使用以下代码捕获事件 -

document.onkeyup = KeyCheck;

function KeyCheck(e) {
    var KeyID = (window.event) ? event.keyCode : e.keyCode;

    switch (KeyID) {
        case 38:
            alert("UP");
            break;
        case 40:
            alert("DOWN");
            break;
    }
}

这是小提琴：DEMO

现在，我想使用箭头键浏览左侧的导航面板，以显示/隐藏右侧面板上的相应div。

任何指导如何让这个球滚动？

Answer 1

我没有试过这个，但首先想到了这一点。你可以将右侧板上的所有div叠加在一起，并且除了其中一个之外，在所有div上都有一个特定的类（即隐藏）。当用户按下“向上”和“向下”按钮时。您可以分别添加/删除隐藏的类。

伪代码：

function navigate() {
    switch(key) {
    case up:
        add hidden to current div
        if(not the top) {
            remove hidden from the div above
        } else {
            remove hidden from the last div
        }
        break;
    case down:
        add hidden to current div
        if(not the bottom) {
            remove hidden from the div below
        } else {
            remove hidden from the first div
        }
    }
}

修改

你可以做的另一件事是将rightPanel变成一个上下移动而不是左右移动的滑块。当用户按下时，用户向上和向下按下时，面板会向上移动。

浏览网页并使用向上键隐藏/显示div

1 个答案: