javascript - ファイル名を変更するための矢印キー（次と戻る）を使用したキーボードナビゲーション

Question

さまざまなファイル名のhtmlファイルがたくさんあるので、キーボードの矢印キーを使用してナビゲートするオプションを追加する必要があります（前のファイルと次のファイル）。

ファイル名は動的ではありません。たとえば、filename.html、anotherfile.html、thirdone.htmlなどです。

したがって、ナビゲーション用に.jsファイルに何が含まれている必要があり、htmlファイルの前のボタンと次のボタンをリンクする必要がありますか？

Answer 1

<a>次のように、2つのタグに2つのIDを定義する場合：

<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を使用して、絶対に配置されたCSS三角形#prev, #next { display: none; }を作成したり遊んだりすることもできます。