我们可以在点击时删除 HTML 元素的边框吗？但保持边界焦点
我正在开发一个项目，考虑到网络可访问性。
代码：
function removeBorder(){
li=document.getElementById("link");
li.classList.add(".remove")
}
body{
background:#dddddd;
}
p:focus{
border:1px solid red;
}
li{
list-style-type:none;
font-size:1rem
padding:30px;
}
a{
text-decoration:none;
}
a:focus{
border:1px solid red;
border-radius:2px;
}
a:hover{
background:orange;
}
.remove{
border:none;
}
<html>
<head>Borders
</head>
<body>
<p tabindex="0">
Click one the page. Then use TAB to navigate the list items</p>
<ul aria-role="list">
<li aria-role="listitem"><a id="link" onclick="removeBorder()" tabindex="0" href="#">Item One</a></li>
<li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Two</a></li>
<li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Three</a></li>
</ul>
</body>
</html>
我有两组用户。
1.普通用户
当我将鼠标悬停在元素上时，在本例中为“li”，我看到橙色的背景色。
问题：当我单击该元素时，出现红色边框。
有没有一种方法可以让我们仅在使用选项卡聚焦时才具有边框，而在单击时则不具有边框？单击时如何删除边框？
2.仅键盘用户
当我们用选项卡聚焦时没问题，边框按预期显示红色。
浮云间1回答
-
莫回无
function removeBorder(){li=document.getElementById("link");li.classList.add(".remove")}body{ background:#dddddd;}p:focus{ border:1px solid red;}li{ list-style-type:none; font-size:1rem padding:30px;}a{text-decoration:none;}a:focus:hover{ border:1px solid red; border-radius:2px;}a:hover{ background:orange;}.remove{border:none;}<html> <head>Borders </head> <body> <p tabindex="0"> Click one the page. Then use TAB to navigate the list items</p><ul aria-role="list"> <li aria-role="listitem"><a id="link" onclick="removeBorder()" tabindex="0" href="#">Item One</a></li> <li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Two</a></li> <li aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Three</a></li> </ul> </body> </html>您应该同时添加焦点和悬停，它可以工作。
随时随地看视频慕课网APP
相关分类
Html5