jQuery 键盘导航 –向左和向右后退和前进一页

发布于 2024-12-09 02:25:44 字数 522 浏览 6 评论 0原文

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

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，它只是显示警报。

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

原文

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.

The html...

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

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;
    }
  });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自由如风 2024-12-16 02:25:44

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

.load( url, [数据,] [完整(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 替换为您要刷新的元素。

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

.load( url, [data,] [complete(responseText, textStatus, XMLHttpRequest)] )
Load data from the server and place the returned HTML into the matched
element.

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;
    }
  });
});

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

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;
    }
  });
});

You can replace #pagewith the element you are refreshing.

回复收藏 0 原文

无尽的现实 2024-12-16 02:25:44

我认为你必须像这样使用窗口对象的位置属性：

$(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 对象上的单击事件。

I think you have to use the location property of the window object like this:

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

Or you can trigger the click event on the jQuery object of your anchor.

回复收藏 0 原文

~没有更多了~