JQuery keyboard navigation - return and move page left and right

I want the user to be able to load the next or previous page when they press left or right on the keyboard. The following and previous links for each page are contained in 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> 

In some jquery, I found that it registers right-clicks, but obviously does not change the url, it just shows a warning.

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

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

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

Download data from the server and put the returned HTML in the matching element.

, div, w,

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

+2

, location window :

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

click jQuery .

+1

All Articles