作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
如何使列表项成为可选项卡? (意思是:使用 TAB
键来 :focus
它们)。我需要了解残障无障碍目的。
我添加了 2 个文本字段以提供对 TAB
的引用点;如果您从 textarea
切换到下一个,然后跳过所有列表项。
HTML:
<textarea></textarea>
<textarea></textarea>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
li {
display: block;
height: 100px;
margin: 0 auto;
width: 95%;
}
a:active, a:focus,
li:active, li:focus {border: 5px solid orange}
li:nth-of-type(1) {background-color: red}
li:nth-of-type(2) {background-color: yellow}
li:nth-of-type(3) {background-color: blue}
li:nth-of-type(4) {background-color: green}
jsFiddle: https://jsfiddle.net/h815zLnp/
最佳答案
使用 tabindex 属性——通常它仅用于在表单输入等处导航——但它可用于确定任何 HTML 元素的焦点顺序。我已经使用了您现有的文本区域和 li,如果您从第一个文本区域开始并使用 Tab 键 - 您将能够看到焦点更改为我在 tabindex 代码中列出的时髦顺序。 shift-tab 也以反向标签索引顺序移动项目:
li {
display: block;
height: 100px;
margin: 0 auto;
width: 95%;
}
a:active, a:focus,
li:active, li:focus {border: 5px solid orange}
li:nth-of-type(1) {background-color: red}
li:nth-of-type(2) {background-color: yellow}
li:nth-of-type(3) {background-color: blue}
li:nth-of-type(4) {background-color: green}
<textarea tabindex="1"></textarea>
<textarea tabindex="3"></textarea>
<ul>
<li tabindex="2"></li>
<li tabindex="5"></li>
<li tabindex="4"></li>
<li tabindex="6"></li>
</ul>
关于html - How Can I Make List Items "Tabbable"(使用Tab键到:focus On Them),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37892396/
我是一名优秀的程序员,十分优秀!