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

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

HTML …

< Prev Next > 

我发现一些jquery注册了正确的按键，但显然不会更改URL，它只是显示一个警告。

 $(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()从URL加载到页面的一部分。

.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加载文档，就像使用修改后的URL调用window.location.assign（）一样。

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

我认为你必须像这样使用window对象的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事件。