Question

我正在测试一个带键盘导航的网站。当我做TAB时，我可以按文档顺序看到链接之间的高亮跳转。现在我想通过设置链接来增强导航，例如第4个链接，一旦有关键字ENTER点击或鼠标点击，突出显示将跳转到第20个链接。有可能吗？

Answer 1

从你的小提琴开始想象有这个链接列表：

<a href="#" id="link1" class="forward-link" data-forward-to="link2">Link 1</a>
<a href="#" id="link2" class="forward-link" data-forward-to="link3">Link 2</a>
<a href="#" id="link3" class="forward-link" data-forward-to="link4">Link 3</a>
<a href="#" id="link4" class="forward-link" data-forward-to="link5">Link 4</a>
<a href="#" id="link5">Link 5</a>

注意：

每个目标链接都有一个id（也是link1，但不是必需的。）
将焦点转移到另一个链接的每个链接都是装饰并带有forward-link类。
将焦点转移到另一个链接的每个链接都有一个data-forward-to属性，它包含链接的ID（实际上允许任何可以控制的控件），当点击元素时它将获得焦点。

现在在标记中我们拥有了我们需要的所有信息，一个小脚本会在onclick装饰的每个元素上附加forward-link的处理程序，并且它将使用其data-forward-to属性转发焦点的价值（请注意我在这里使用jQuery - 不要忘记将它包含在小提琴中！ - 只是为了保持代码简短，但它不是强制性的/非常有用）：

$(".forward-link").click(function () {
    $("#"+$(this).data("forward-to")).focus();
});

Answer 2

取自:(我稍微更改了代码） Tabbing navigation

这是一个例子:(看一下tabindex）

使用tabindex，您可以设置TAB跳转顺序。

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with FORM</TITLE>
</HEAD>
<BODY>
...some text...
<P>Go to the 
<A tabindex="10" href="http://www.w3.org/">W3C Web site.</A>
...some more...
<BUTTON type="button" name="get-database"
           tabindex="5" onclick="get-database">
Get the current database.
</BUTTON>
...some more...
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="0" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
</BODY>
</HTML>

这是另一个：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with FORM</TITLE>
</HEAD>
<BODY>

<a href="http://www.w3schools.com/html/0" tabindex="0" >Visit our HTML tutorial</a>
<br/>
<a href="http://www.w3schools.com/html/1" tabindex="3">Visit our HTML tutorial</a>
<br/>
<a href="http://www.w3schools.com/html/2" tabindex="2">Visit our HTML tutorial</a>
<br/>
<a href="http://www.w3schools.com/html/3" tabindex="1">Visit our HTML tutorial</a>
<br/>
<a href="http://www.w3schools.com/html/4" tabindex="4">Visit our HTML tutorial</a>
<br/>
<a href="http://www.w3schools.com/html/5" tabindex="5">Visit our HTML tutorial</a>
</BODY>
</HTML>

HTML键盘导航链接

2 个答案: