如何在焦点元素“ A”上更改元素“ B”的类名
||
我正在建立一个可访问的网站，为残疾人播放YouTube视频。我使用的是onfocus（并更改类名），而不是使用：focus，以便它与更多浏览器兼容，以对所选链接提供视觉反馈。
我想在text / img链接获得键盘焦点时设置列表项背景的样式-这可能吗？
非常感谢，
麦克风
没有找到相关结果
已邀请:
4 个回复
吐兄
是否可以以编程方式（键盘）获得焦点，但是我可以向您展示如何以编程方式更改类名。 [基于评论的编辑]如果您的意思是hrefs，这是一个有效的示例。使用标签跳到下一个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>孝箱捆讨
如果您使用jQuery，则可以：盛梯獭八搽
$(\"ul.someclass > li\").mouseenter(function() { $(this).addClass(\"current\"); }).mouseleave(function() { $(this).removeClass(\"current\"); });渴翅吮斡撤
<?php while ($row = mysql_fetch_assoc($result)) { $js = \"<script language=\\\"javascript\\\">\"; $js .= \"function changeClass$id(){\"; $js .= \"document.getElementById(\\\"$id\\\").setAttribute(\\\"class\\\", \\\"popfocus\\\");}\"; $js .= \"function changeClass1$id(){\"; $js .= \"document.getElementById(\\\"$id\\\").setAttribute(\\\"class\\\", \\\"pop\\\");}\"; $js .= \"</script>\"; echo $js; echo \"<li><div id=\\\"$id\\\" class=\\\"pop\\\">\\n\"; echo \"<a onFocus=\\\"changeClass$id()\\\" onBlur=\\\"changeClass1$id()\\\" onMouseover=\\\"changeClass$id()\\\" onMouseout=\\\"changeClass1$id()\\\"