用箭头键(向前和后退),用于改变文件名的键盘导航(keyboard navigation with

2019-08-01 02:28发布

我有不同的文件名一堆的HTML文件,我需要添加使用键盘上的方向键来浏览(前面和后面的文件)的选项。

该文件的名称是不是动态的。例如:filename.html,anotherfile.html,thirdone.html等。

所以,我需要什么在为导航的.js文件,和我应该上的HTML文件链接前面,旁边的按钮?

Answer 1:

如果你定义两个两个一分维的<a>像这样的标签:

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

你可以做这样的事情navigation.js ,包括它的每一页:

// 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; } #prev, #next { display: none; }或玩弄绝对定位的CSS三角形 。



文章来源: keyboard navigation with arrow keys (next and back) for changing filenames