键盘导航:怎么去用方向键的下一个和previous元素? [英] Keyboard navigation: how to go to the next and previous element with arrow keys?

查看:128
本文介绍了键盘导航:怎么去用方向键的下一个和previous元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图建立与键盘导航网站。我希望用户能够通过使用左,右箭头五六页的菜单导航。
无论哪个页面是用户,我希望他/她去前进/后退的时候,左/右箭头pressed菜单。

I am trying to build a site with keyboard navigation. I want the user to be able to navigate through a menu of five or six pages using the left and right arrows. No matter on which page is the user, I want him/her to go back/forward in the menu when the left/right arrow is pressed.

比方说,横向菜单是建立这样:结果
[家庭/随机页面/页一些/页的另一个/等等]

Let's say the horizontal menu is built this way :
[Home / Random page / Some page / Another page / And so on]

显然,这是行不通的。以下是我迄今为止:

Apparently it is not working. Here is what I have so far :

document.onkeyup = KeyCheck;       

var pages = ["index.php", "random-page.php", "some-page.php", "another-page.php", "and-so-on.php"];

function leftarrowpressed() {
    location.href = pages[0]-1;
}

function rightarrowpressed() {
    location.href = pages[0]+1;
    }
} 

function KeyCheck(e)
    {
       var KeyID = (window.event) ? event.keyCode : e.keyCode;

       switch(KeyID)
       {

 // left arrow key
         case 37:
         leftarrowpressed()    
          break;

//  right arrow key
          case 39:
          rightarrowpressed() 
          break;

       }
    }

感谢大家的帮助。

推荐答案

页[0] -1 将评估为的index.php -1 NaN的。你不想从页面的网址(你基本上无法从字符串减)减1 - 而减去 1 从索引中得到previous页面。此外,后卫界限:

pages[0]-1 will evaluate to "index.php"-1 which is NaN. You don't want to subtract 1 from the page URL (you basically cannot subtract from strings) - rather subtract 1 from the index to get the previous page. Also, guard for the bounds:

location.href = pages[ Math.max(0, 0 - 1) ];

location.href = pages[ Math.min(pages.length - 1, 0 + 1) ];

我猜你当前页面的自动索引替换 0

其次,你必须外来} RIGHTARROW pressed 它似乎。

Secondly, you have an extraneous } in rightarrowpressed it seems.

这篇关于键盘导航:怎么去用方向键的下一个和previous元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆