keyboard navigation with arrow keys (next and back) for changing filenames

后端 未结 1 361
眼角桃花
眼角桃花 2021-01-29 13:25

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

1条回答
  •  借酒劲吻你
    2021-01-29 14:12

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

    
    
    

    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 讨论(0)
提交回复
热议问题