Mik*_*ike -2 javascript jquery keyboard-navigation
我有一堆带有不同文件名的html文件,我需要添加一个选项来使用键盘箭头键进行导航(上一个和下一个文件).
文件名不是动态的.例如:filename.html,anotherfile.html,thirdone.html等.
所以我需要.js文件中的导航内容,以及我应该链接html文件中的上一个,下一个按钮的内容?
如果您要在两个<a>
标签上定义两个ID,如下所示:
<a id="prev" href="filename.html">prev</a>
<a id="next" href="thirdone.html">next</a>
Run Code Online (Sandbox Code Playgroud)
您可以在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;
}
}
});
});
Run Code Online (Sandbox Code Playgroud)
您甚至可以使用一点CSS来制作#prev, #next { display: none; }
或使用绝对定位的CSS三角形.
归档时间: |
|
查看次数: |
7869 次 |
最近记录: |