[英]keyboard navigation with arrow keys (next and back) for changing filenames
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).我有一堆具有不同文件名的 html 文件,我需要添加一个选项来使用键盘箭头键导航(上一个和下一个文件)。
The file-names are not dynamic.. for example: filename.html, anotherfile.html, thirdone.html etc.文件名不是动态的……例如:filename.html、anotherfile.html、thirdone.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?所以我需要 .js 文件中的内容用于导航,以及我应该链接 html 文件上的上一个、下一个按钮的内容?
If you were to define two ID's on two <a>
tags like so:如果您要在两个<a>
标签上定义两个 ID,如下所示:
<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:你可以在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;
}
}
});
});
You could even use a little CSS to make the #prev, #next { display: none; }
你甚至可以使用一点 CSS 来制作#prev, #next { display: none; }
#prev, #next { display: none; }
or play around with absolutely positioned CSS triangles . #prev, #next { display: none; }
或玩弄绝对定位的CSS三角形。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.