带有箭头键(下一个和后一个)的键盘导航，用于更改文件名

问题描述

我有一堆具有不同文件名的html文件，我需要添加一个选项以使用键盘箭头键进行导航(上一个和下一个文件).

I have a bunch of html files with different file-names, that I need to add an option to use keyboard arrow keys to navigate (previous and next file).

文件名不是动态的.例如:filename.html，anotherfile.html，thirdone.html等

The file-names are not dynamic.. for example: filename.html, anotherfile.html, thirdone.htmletc.

因此，我需要.js文件中的内容进行导航，以及应该链接html文件中的上一个，下一个按钮的内容?

So I need what's in the .js file for the navigation, and what I should link the previous, next buttons on the html file?

推荐答案

如果要在两个<a>标签上定义两个ID，如下所示:

If you were to define two ID's on two <a> tags like so:

<a id="prev" href="filename.html">prev</a>
<a id="next" href="thirdone.html">next</a>

您可以在navigation.js中执行类似的操作，并将其包含在每个页面中:

You could do something like this in navigation.js and include it from every page:

// when the document is ready, run this function
jQuery(function( $ ) {
    var keymap = {};

    // LEFT
    keymap[ 37 ] = "#prev";
    // RIGHT
    keymap[ 39 ] = "#next";

    $( document ).on( "keyup", function(event) {
        var href,
            selector = keymap[ event.which ];
        // if the key pressed was in our map, check for the href
        if ( selector ) {
            href = $( selector ).attr( "href" );
            if ( href ) {
                // navigate where the link points
                window.location = href;
            }
        }
    });
});

您甚至可以使用一些CSS来制作#prev, #next { display: none; }，或者使用绝对定位的 CSS三角形.

You could even use a little CSS to make the #prev, #next { display: none; } or play around with absolutely positioned CSS triangles.

这篇关于带有箭头键(下一个和后一个)的键盘导航，用于更改文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！