我正在构建一个可访问的网站来为残障人士播放 YouTube 视频。我正在使用 onfocus(并更改类名)而不是使用 :focus 以便它与更多浏览器兼容,以便对所选链接提供视觉反馈。
我想在 text/img 链接获得键盘焦点时设置列表项背景的样式 - 这可能吗?
非常感谢,
迈克
最佳答案
我不知道<li>
可以通过编程方式获得(键盘)焦点,但我可以 show you how to change classnames以编程方式。
[根据评论编辑] 如果你的意思是 hrefs,here是一个工作示例。使用 Tab 跳转到下一个 href。
"use strict";
(function () {
var refs = document.getElementsByTagName('a');
document.addEventListener('focus', hoverClass, true);
refs[0].focus();
setTimeout(emulateHover, 800);
function emulateHover() {
if (!document.activeElement.href) {return clearTimeout(0);}
var index = parseInt(document.activeElement.href.split(/#/)[1], 10);
var activeElement = refs[index] || refs[0];
if (activeElement) { activeElement.focus(); }
setTimeout(emulateHover, 800);
}
function hoverClass(evt){
var srcEl = evt.srcElement || evt.target;
var i = refs.length;
while(i--) { refs[i].className = 'a'; }
if (srcEl && !/a/i.test(srcEl.tagName)) { return clearTimeout(0); }
var isA = /a$/i.test(srcEl.className);
srcEl.className = isA ? 'b' : 'a';
}
}());
body {
font: normal 12px/15px verdana, arial;
}
.a {background-color: #eee; transition: all 0.5s 0s}
.b {background-color: green; color:white; transition: all 0.5s 0s}
a {text-decoration: none;}
<ul>
<li><a id="first" class="a" href="#1">line 1</a></li>
<li><a class="a" href="#2">line 2</a></li>
<li><a class="a" href="#3">line 3</a></li>
<li><a class="a" href="#4">line 4</a></li>
<li><a class="a" href="#5">line 5</a></li>
<li><a class="a" href="#6">line 6</a></li>
</ul>
关于javascript - 如何更改元素 "B"onFocus 元素 "A"的类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5694076/