[英]Navigate with arrow keys
有人知道用jquery解决方案,用箭头键(向上,向下)浏览列表吗?
如果我有一个列表,例如,链接:
<a href="#">First Link</a>
<p>
<a href="#">Second Link</a>
<p>
<a href="#">Third Link</a>
<p>
<a href="#">Fourth Link</a>
<p>
如果用户看到他实际使用悬停效果导航的位置会很好:
a:hover{color:blue}
谢谢! 试验: http : //jsfiddle.net/ZBn7r/1/
通过焦点替换悬停。
然后,您可以将焦点移动到jQuery的下一个和上一个链接,如下所示:
$(document).keydown(
function(e)
{
if($('a:focus').length==0){$('a').first().focus();}
if (e.keyCode == 39) {
$("a:focus").next().focus();
}
if (e.keyCode == 37) {
$("a:focus").prev().focus();
}
}
);
更新小提琴: http : //jsfiddle.net/ZBn7r/2/
在jsfiddle链接中测试完全正常工作的代码片段
HTML
<ul>
<li><a href="#">First Link</a></li>
<li> <a href="#">Second Link</a></li>
<li> <a href="#">Third Link</a></li>
</ul>
CSS
li.selected {background:yellow}
a:hover{color:blue}
a {
color:inherit;
text-decoration: none;
}
ul
{
list-style-type: none;
}
JS
var li = $('li');
var liSelected;
$(window).keydown(function(e){
if(e.which === 40){
if(liSelected){
liSelected.removeClass('selected');
next = liSelected.next();
if(next.length > 0){
liSelected = next.addClass('selected');
}else{
liSelected = li.eq(0).addClass('selected');
}
}else{
liSelected = li.eq(0).addClass('selected');
}
}else if(e.which === 38){
if(liSelected){
liSelected.removeClass('selected');
next = liSelected.prev();
if(next.length > 0){
liSelected = next.addClass('selected');
}else{
liSelected = li.last().addClass('selected');
}
}else{
liSelected = li.last().addClass('selected');
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.