您需要为此添加JavaScript代码。看起来JQuery可以成为这项工作的正确工具。应该是这样的:
$(function() {
var allowKeypressNavigation = true;
var $body = $('body');
var $activeSection = $('#main');
//set active section
function setPrevSectionActive() {
if($activeSection.is(':first-child')) {
$activeSection = $activeSection.siblings().last();
} else {
$activeSection = $activeSection.prev();
}
}
function setNextSectionActive() {
if($activeSection.is(':last-child')) {
$activeSection = $activeSection.siblings().first();
} else {
$activeSection = $activeSection.next();
}
}
//scroll to active section
function scrollToActiveSection() {
var location = $activeSection.offset().top;
$body.scrollTop(location);
}
//disable keyboard navigation when input in focus
$('input').on("focus", function(e){
allowKeypressNavigation = false;
}).on("blur", function(e){
allowKeypressNavigation = true;
});
//assing event to document
$(document).on("keydown", function(e){
if(allowKeypressNavigation) {
var keyCode = e.keyCode;
if(keyCode==38) {
//UP pressed
setPrevSectionActive();
scrollToActiveSection();
} else if(keyCode==40) {
//DOWN pressed
setNextSectionActive();
scrollToActiveSection();
}
}
});
});
我为此添加了一个working example on plunker。
我知道你可以用'tabindex'做这个,但不能用箭头键。也许是使用''onkeypress'''''' keypressup''事件监听器? – Crowes