如何解决如何在焦点元素“ A”上更改元素“ B”的类名
|| 我正在建立一个可访问的网站,为残疾人播放YouTube视频。我使用的是onfocus(并更改类名),而不是使用:focus,以便它与更多浏览器兼容,以对所选链接提供视觉反馈。 我想在text / img链接获得键盘焦点时设置列表项背景的样式-这可能吗? 非常感谢, 麦克风解决方法
我不知道
<li>
是否可以以编程方式(键盘)获得焦点,但是我可以向您展示如何以编程方式更改类名。
[基于评论的编辑]如果您的意思是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>
,设置类的新值,您可以执行以下操作:
element.className = \"A\";
如果您使用jQuery,则可以:
$(element).addClass(\"A\");
$(element).removeClass(\"B\");
,我认为对诸如list之类的HTML元素使用焦点(如果可行,请不要尝试)听起来不是很好。而是使用悬停。
我会跟着去;悬停,mouseenter,mouseover。
$(\"ul.someclass > li\").mouseenter(function() {
$(this).addClass(\"current\");
}).mouseleave(function() {
$(this).removeClass(\"current\");
});
欲获得更多信息;
http://api.jquery.com/mouseover/
http://api.jquery.com/hover/
,找到了一个看起来不错的凌乱方法:
<?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()\\\"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。