使用键盘控制jQuery

我在一个非常简单的网站上安装并运行了jquery的easing插件，可以在这里看到：

我对锚定链接（调用jquery函数将窗口滑动到按下的任何div）的代码是：

我已经尝试为Animate2id函数设置一个变量，该函数获取您正在查看的当前div，然后可以使用该变量转到下一个或上一个div（但我甚至不知道是否正确地执行了该操作…）

---

显然，jquery/javascript还是新手，因此非常感谢您的帮助。

首先，我要修改您的HTML，单击处理程序应该放在javascript中。使用

href

属性指向您的相关div：

<div id="link-container">
    <a href="#c1" style="" rel="Greetings"><img src="img/btn1.jpg" /></a>
    <a href="#c2" rel="About Us"><img src="img/btn1.jpg" /></a>
    <a href="#c3" rel="Plants Plus"><img src="img/btn1.jpg" /></a>
    <a href="#c4" rel="Kia Cadenza"><img src="img/btn1.jpg" /></a>
    <a href="#c5" rel="Panadol"><img src="img/btn1.jpg" /></a>
    <a href="#c6" rel="Asics"><img src="img/btn1.jpg" /></a>
    <a href="#c7" rel="Tooheys"><img src="img/btn1.jpg" /></a>
    <a href="#c8" rel="Channel 7 Olympic Coverage"><img src="img/btn1.jpg" /></a>
    <a href="#c9" rel="Hit us up!"><img src="img/btn1.jpg" /></a>
    <span style="font-size:25px" id="display"></span>
</div>

然后在

Animate2id

中，在当前

div

上添加一个类：

function Animate2id(id, ease){ //the id to animate, the easing type
    $(".current").removeClass("current");
    $(id).addClass("current");

    // rest of this functions' code ...
}

现在，当类位于选定的

div

上时，您可以在左/右光标上确定需要进入的方向，按：

$(window).keyup(function(e){
    if (e.which == 37) { // left cursor
         var $prevDiv = $(".current").prev("div");
         Animate2id($prevDiv.attr("id"))    
    }

    if (e.which == 39) { // right cursor
         var $nextDiv = $(".current").next("div");
         Animate2id($nextDiv.attr("id"))    
    }
});

---

好的，我在现场看到了，

t

的键控功能正常-但是动画

html，body

scrooll top？我不确定这是对的。也许像srolleft=0？是吗？抱歉，我没有意识到网站上的代码与我在这里发布的代码不同。我从其他地方复制了这段代码，并计划对其进行编辑。这里的目标是让按键（左/右）找出当前正在查看的div，然后将其左/右移动（最好使用jquery）。更改此行：

$（window）.keyup（函数（e）{

越来越近，尽管现在按下键时的错误是：uncaughttypeerror:无法读取null的属性“left”（无论我正在查看哪个div）我想这是因为你的代码中已经有了一个

#container

元素，它变得很混乱。我已经将链接上容器的id更新为

#link container

，试试看。菜单容器的id是#menu（我已经在你的原始帖子中编辑了对它的引用）。如果您想了解在线版本在实践中的不当行为，我已经用您的代码更新了在线版本：不赞成使用A href标记作为jquery触发器。最好使用

ID=“Cx”

，并使用

$（'#Cx'）绑定到它。单击
-然后您就不需要禁用默认操作了！
$("#link-container A").click(function(e) {
    e.preventDefault();
    Animate2id($(this).attr("href"));   
});

function Animate2id(id, ease){ //the id to animate, the easing type
    $(".current").removeClass("current");
    $(id).addClass("current");

    // rest of this functions' code ...
}

$(window).keyup(function(e){
    if (e.which == 37) { // left cursor
         var $prevDiv = $(".current").prev("div");
         Animate2id($prevDiv.attr("id"))    
    }

    if (e.which == 39) { // right cursor
         var $nextDiv = $(".current").next("div");
         Animate2id($nextDiv.attr("id"))    
    }
});