最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - keyboard navigation with arrow keys (next and back) for changing filenames - Stack Overflow

programmeradmin6浏览0评论

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).

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

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?

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).

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

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?

Share Improve this question asked Oct 1, 2012 at 22:43 MikeMike 2,3917 gold badges30 silver badges51 bronze badges 3
  • 2 This question is SO vague. Examples? Code? What have you tried? – Colleen Commented Oct 1, 2012 at 22:47
  • Seems more like someone not knowing where to start on handling this type of navigation. It seems easily answered, and potentially a good source of information for someone in a similar bind later. – gnarf Commented Oct 1, 2012 at 23:05
  • possible duplicate of Bind Keyboard to left/right navigation – gnarf Commented Oct 1, 2012 at 23:08
Add a ment  | 

1 Answer 1

Reset to default 6

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>

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

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

发布评论

评论列表(0)

  1. 暂无评论