jQuery键盘导航–左右移动页面 [英] jQuery keyboard navigation – go back and forward a page with left and right

问题描述

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

I'd like the user to be able to load the next or previous page when they press left or right on the keyboard. The next and previous links for each page are contained within two buttons.

html ...

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

一些jquery我发现注册了右键，但是并没有明显改变URL，它只是显示一个警报.

Some jquery I found that registers the right key presses, but doesn't change the url obviously, it just shows an alert.

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

推荐答案

您可以使用 .load() 从URL加载到页面的一部分.

You can use .load() to load from a URL to a portion of the page.

.load(url，[data，] [complete(responseText，textStatus，XMLHttpRequest)])

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

Load data from the server and place the returned HTML into the matched element.

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

I'm assuming you have a specific div you want to refresh w page contents, and you don't want to refresh the entire page

$(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

Or, if you want to refresh the entire page you can use window.location

每当修改位置对象的属性时，都会创建一个文档 将使用该URL加载，就像 window.location.assign() 用修改后的URL调用.

Whenever a property of the location object is modified, a document will be loaded using the URL as if window.location.assign() had been called with the modified 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替换为要刷新的元素.

You can replace #pagewith the element you are refreshing.

这篇关于jQuery键盘导航–左右移动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！