Question

我希望用户能够在键盘上向左或向右按下时加载下一页或上一页。每个页面的下一个和上一个链接都包含在两个按钮中。

html ...

<a href="/page-link-prev" class="prev button">&lt; Prev</a>
<a href="/page-link-next" class="next button">Next &gt;</a>

我发现有些jquery注册了正确的按键，但显然没有更改网址，只是显示警告。

$(function() {
  $(document).keyup(function(e) {
    switch(e.keyCode) {
      case 37 : alert('You pressed Left'); break;
      case 39 : alert('You pressed Right'); break;
    }
  });
});

Answer 1

您可以使用.load()从网址加载到网页的一部分。

.load（url，[data，] [complete（responseText，textStatus，XMLHttpRequest）]）

从服务器加载数据并将返回的HTML放入匹配的   元件。

我假设您有一个特定的div想要刷新页面内容，而且您不想刷新整个页面

$(function() {
  $(document).keyup(function(e) {
    switch(e.keyCode) {
      case 37 : $('#page').load($(".prev").attr("href")); break;
      case 39 : $('#page').load($(".next").attr("href")); break;
    }
  });
});

或者，如果您想刷新整个页面，可以使用window.location

每当修改位置对象的属性时，都会生成文档将使用URL加载，就像 window.location.assign（）一样使用修改后的URL调用。

$(function() {
  $(document).keyup(function(e) {
    switch(e.keyCode) {
      case 37 : window.location = $('.prev').attr('href'); break;
      case 39 : window.location = $('.next').attr('href'); break;
    }
  });
});

您可以将#page替换为您正在刷新的元素。

Answer 2

我认为您必须使用窗口对象的location属性，如下所示：

$(function() {
   $(document).keyup(function(e) {
    switch(e.keyCode) {
      case 37 :
        window.location="/page-link-prev";
      break;
      case 37 :
        window.location="/page-link-next";
      break;
    }
  });
});

或者您可以在锚点的jQuery对象上触发click事件。

jQuery键盘导航 - 向左和向后返回页面

2 个答案: