使用JavaScript高亮显示选定的div

我想知道如何使用jquery或JavaScript应用一个onclick事件，突出显示选定的div并突出显示其他div

我有一个动态的名称行，用户可以单击以查看选定的消息，当用户单击选定的名称时，名称将以边框突出显示。。。有没有一个简单的方法来实现这类事件，而不必经过以下步骤

函数交换（foo）{
按钮=新数组（）；
按钮=document.getElementsByTagName（'a'）；
对于（i=0；i

.inactive{
背景:#666；
边框：1px实心#000；
颜色：#FFF；
填充：12px
}
.主动{
背景：#0F0；
边框：1px实心#F00；
颜色：#F00；
填充：12px
}

试试这个：

let links=document.querySelectorAll（'a'）；
对于（变量i=0；i

.active{背景：#0F0；边框：1px实心#F00；颜色：#F00；填充：12px}

您可以使用删除循环

您可以实现如下内容：

• 单击其中一个名称时
• 激活当前的
• 从当前活动类中删除活动类
• 向单击的元素添加活动类

这样，您就不需要遍历所有按钮

请注意，您可以使用

addEventHandler

一次添加所有处理程序，而不是在html中单击

onclick

。这将减少代码的耦合，并使其更易于维护

功能交换（事件）{
//获取当前活动元素
document.querySelectorAll（'.active'）
//删除活动类
.forEach（e=>e.className='inactive'）；
//并将活动类添加到事件目标。
event.target.className='active'；
//防止默认链接丢失
event.preventDefault（）；
}
document.querySelectorAll（“#container>a”）
.forEach（button=>button.addEventListener（'click'，swapme））
.inactive{
背景:#666；
边框：1px实心#000；
颜色：#FFF；
填充：12px
}
.主动{
背景：#0F0；
边框：1px实心#F00；
颜色：#F00；
填充：12px
}



我会检查一下，谢谢