使用左右箭头键进行其他导航

时间:2013-07-08 00:29:13

标签: jquery events keyboard

我希望为访问者添加使用左右箭头键在浏览器兼容性之间导航的功能。

我现有的HTML已经有Back和Next链接。我需要做什么才能让左键触发<%= previousLink%>和右键触发<%= nextLink%>?

<div class="full-size-image-nav">
    <%if previousNumber <> 0 then%>
        <div class="previous">
            <p><a href="<%=previousLink%>">Back</a></p>
        </div>
    <%end if%>
    <%if nextNumber <> 0 then%>
        <div class="next">
            <p><a href="<%=nextLink%>">Next</a></p>
        </div>
    <%end if%>
</div>

我见过jQuery Event Keypress: Which key was pressed?,但不知道如何将其改编为我的代码。谢谢。

1 个答案:

答案 0 :(得分:5)

选中此项,DEMO http://jsfiddle.net/qRqNf/1/

首先点击结果框,然后尝试按左/右键。

$(document).ready(function () {
    $("body").keydown(function(e) {
      if(e.which == 37) { // left     
          $(".previous a").trigger("click");
      }
      else if(e.which == 39) { // right     
          $(".next a").trigger("click");
      }
    });
    $(".previous a").on("click",function(){
        // your scripts for previous click here
        window.location = 'http://www.google.com';  
    });
    $(".next a").on("click",function(){
        // your scripts for next click here
        window.location = 'http://sg.yahoo.com/';   
    });
});