不要更改html中列表项的焦点

Question

嗨，我有一个html列表，如下所示：

<ul id="componentList" class="at-list">
<li tabindex="1" class="at-list-item">Item 1</li>
<li tabindex="1" class="at-list-item">Item 2</li>
<li tabindex="1" class="at-list-item">Item 3</li>
<li tabindex="1" class="at-list-item">Item 4</li>
<li tabindex="1" class="at-list-item">Item 5</li>
<li tabindex="1" class="at-list-item">Item 6</li>
<li tabindex="1" class="at-list-item">Item 7</li>
</ul>

现在，我可以通过单击列表项来关注它们，并通过单击页面上的任何位置来清除焦点。我想做的是，只有当我点击列表中的其他项目时，才能清除列表项目的焦点。我该怎么做？谢谢。

**更新：**css文件：

.at-list {
list-style-type: none;
position: relative;
left: -5%;
}
.at-list-item {
display: block;
width: 90%;
font-size: 15px;
color: #000000;
padding: 3px;
cursor: pointer;
border-bottom: 1px solid #454545AA;
-webkit-transition: font-size 0.3s ease-in-out, font-weight 0.3s ease-in-out;
transition: font-size 0.3s ease-in-out, font-weight 0.3s ease-in-out;
}
.at-list-item:hover {
color: #454545AA;
}
.at-list-item:focus {
color: #fdb715;
font-size: 16px;
font-weight: bold;
}

Answer 1

策略

您基本上需要的是忽略默认的(内置的(HTML/CSS元素(去(聚焦机制。因此，除了:hover，我们将忽略该机制，并实施我们自己的小策略：

• 引入了类.selected和.unselected，这样我们就可以使用CSS来修改包含这两个类的"at list item"的一些属性
• 创建一个Javascript处理程序，用于在单击菜单项时处理前面提到的类的切换
• 将处理程序附加到每个菜单项
• 忽略CSS中的:active和:focus(目前，除非您想在触发这些事件时修改属性(

代码更改/添加

• 将.at-list-item的字体颜色/大小处理移动到一个单独的CSS行
• 为类.selected和.unselected引入CSS
• 添加了处理点击切换的(香草(Javascript

编码

// Add a click eventlistener to each menu item
Array.from(document.querySelectorAll('.at-list-item')).
forEach(el => el.addEventListener('click', () => toggleMenu(el)));
function toggleMenu(el) {
if (el.classList.contains("selected")) {
el.classList.remove("selected");
el.classList.add("unselected");
}
else {
for (const child of document.getElementById("componentList").children) {
child.classList.remove("selected");
child.classList.add("unselected");
}
el.classList.remove("unselected");
el.classList.add("selected");
}
}

.at-list {
list-style-type: none;
/*    position: relative;
left: -5%;
*/
}
.at-list-item {
display: block;
width: 90%;
padding: 3px;
cursor: pointer;
border-bottom: 1px solid #454545AA;
}
.at-list-item:hover {
color: #454545AA;
}
.at-list-item,
.at-list-item.unselected {
color: #000000;
font-size: 15px;
}
.at-list-item.selected {
color: #fdb715;
font-size: 16px;
font-weight: bold;
}

<ul id="componentList" class="at-list">
<li tabindex="1" class="at-list-item">Item 1</li>
<li tabindex="1" class="at-list-item">Item 2</li>
<li tabindex="1" class="at-list-item">Item 3</li>
<li tabindex="1" class="at-list-item">Item 4</li>
<li tabindex="1" class="at-list-item">Item 5</li>
<li tabindex="1" class="at-list-item">Item 6</li>
<li tabindex="1" class="at-list-item">Item 7</li>
</ul>