Javascript 如何设置聊天应用程序的格式以在侧栏中显示省略号，并在单击后使每个div保持高亮显示？

我正在构建一个HTML聊天应用程序模板，在尝试完成它时遇到了两个主要问题

尽管我使用了

text overflow:eliple

当任何一个聊天被点击时，我希望他们保持活跃的颜色，直到我点击另一个，但我不知道如何去做

以下是我的HTML和CSS：

正文{
背景图片：url（“../img/gradientBackgroundOne.png”）；
背景重复：无重复；
背景附件：固定；
背景大小：100%100%；
}
.包装纸{
显示：网格；
网格模板列：1fr 2fr；
宽度：85vw；
高度：80vh；
保证金：自动；
利润率最高：2%；
}
/* 
*本节将设置侧边栏的样式，其中将包含所有用户的聊天记录
*
*/
.侧边栏{
显示：网格；
网格模板行：80px 60vh自动；
背景颜色：紫色；
}
.sidebar>.chats标题{
背景色：紫罗兰色；
}
.sidebar>.group聊天{
溢出y：自动；
背景色：白色；
}
.sidebar>.group chats>.group chat name{
填充：15px；
背景颜色：巧克力色；
边框：1px纯黑；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
.sidebar>.group chats>div:悬停{
背景颜色：白肋木；
}
.sidebar>.group chats>div:活动{
背景色：rgb（122184235）；
}
.sidebar>。添加新聊天{
背景颜色：青绿色；
}
/**************************************/
/*结束侧栏造型*/
/**************************************/
/* 
*本节将设置聊天的样式，其中将包含所有用户的消息
*
*/
.聊天室容器{
显示：网格；
网格模板行：1fr 8fr自动；
}
.chat容器>.chat{
背景色：红色；
}
.chat container>.message container{
显示：网格；
网格模板列：5%自动；
}
.chat container>.chat title{
显示：网格；
背景色：黄绿色；
边框：2件纯黑；
}  
.chat container>.message container>.image bk{
显示：网格；
背景颜色：蓝色；
}
.chat容器>.chat title>.title文本{
颜色：白色；
左边距：0px；
保证金：自动；
}
/**************************************/
/*聊天风格结束*/
/**************************************/
/*图标样式*/
我{
保证金：自动；
/*字体大小：1.6rem*/
颜色：rgb（240、240、240）；
}

文件








聊天
L.R.D.D
路易斯：它们不新鲜，但它们质量很好
芒金和我！
丹尼斯：嘿，DD
博伊兹酒店
文森特：嘿嘿，史蒂夫，哑巴嘿嘿
例2
弗雷德：我是弗雷德，看看我！
例3
马克：哇，伙计，法里兹尔！
神奇校车
亚瑟：哦，天哪，请让这成为一次普通的实地考察吧( 
添加新聊天！
L.R.D.D

您可能必须使用javascript来实现这一点。默认情况下：活动状态的功能是在单击并释放鼠标按钮后立即恢复到：悬停状态

.sidebar > .group-chats > div:active {
    background-color: red;
}

如果删除：hover状态，您将使其保持红色，但据我所知，不可能保持：活动状态，只要：hover在单击完成后立即接管

正文{
背景图片：url（“../img/gradientBackgroundOne.png”）；
背景重复：无重复；
背景附件：固定；
背景大小：100%100%；
}
.包装纸{
显示：网格；
网格模板列：1fr 2fr；
宽度：85vw；
高度：80vh；
保证金：自动；
利润率最高：2%；
}
/* 
*本节将设置侧边栏的样式，其中将包含所有用户的聊天记录
*
*/
.侧边栏{
显示：网格；
网格模板行：80px 60vh自动；
背景颜色：紫色；
}
.sidebar>.chats标题{
背景色：紫罗兰色；
}
.sidebar>.group聊天{
溢出y：自动；
背景色：白色；
}
.sidebar>.group chats>.group chat name{
填充：15px；
背景颜色：巧克力色；
边框：1px纯黑；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
.sidebar>.group chats>div:悬停{
背景颜色：白肋木；
}
.sidebar>.group chats>div:活动，
.sidebar>.group chats>div:focus{
背景色：红色；
}
.sidebar>。添加新聊天{
美国银行