Tumblr箭头键导航使用JavaScript

Tumblr arrow keys navigation using JavaScript

本文关键字：JavaScript 导航 Tumblr      更新时间：2023-09-26

如何使用JavaScript为Tumblr主题创建箭头键导航?

我正试图写一些JavaScript允许用户的Tumblr主题使用left和right箭头键来导航页面。

我已经设法使基本概念工作:

document.onkeydown = function(event) {
    event = event || window.event;
    var key = event.keyCode;
    var currentPage = {CurrentPage};
    // left arrow key
    if (key == 37) {
        var previousPage = currentPage - 1;
        window.location.href = "/page/" + previousPage;
    }
    // right arrow key
    if (key == 39) {
        var nextPage = currentPage + 1;
        window.location.href = "/page/" + nextPage;
    }
};

这遇到了用户能够超越最后一页的问题，并且可能(我不确定)在永久链接页面上工作。然而，对于url使用{PreviousPage}和{NextPage}变量要容易得多，但由于某种原因，我无法让它们在JavaScript中工作。即使我用JS前缀它们(即{JSPreviousPage}和{JSNextPage})，它们仍然解析为什么，尽管变量在HTML中工作得很好。

为分页锚点链接添加下一个和上一个id。然后试试这个:

$(document).keydown(function(e) {
var url = false;
    // Left arrow key code
    if (e.which == 37) {  
        url = $('#prev').attr('href');
    }
    // Right arrow key code
    else if (e.which == 39) {  
        url = $('#next').attr('href');
    }
    if (url) {
        window.location = url;
  }

});

相关文章：