Javascript 当按钮处于活动状态或选中时更改背景色

我有默认的

\u侧文件夹

，背景为

黑色

当选择

按钮时，我想将
bgcolor
更改为
蓝色

.zf-folder:active ._sideFolder {
  background-color: blue;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0px;
  width: 5px
}

蓝色仅在单击时显示

我真的对我的伪CSS感到困惑。我应该在这里使用JavaScript吗


我想像左边的图片一样显示

仅供参考：在我的项目中，我使用
\u sideFolder
和
背景色：红色



$（文档）.ready（函数（）{
$（'table.table'）.DataTable（）；
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
$（$.fn.dataTable.tables（true））.dataTable（）.columns.adjust（）；
});
});
\u侧文件夹{
背景色：黑色；
身高：100%；
左：0；
位置：绝对位置；
顶部：0px；
宽度：5px
}
.zf文件夹：活动。_侧文件夹{
背景颜色：蓝色；
身高：100%；
左：0；
位置：绝对位置；
顶部：0px；
宽度：5px
}
.zf文件夹a{
颜色：白色；
文字装饰：无；
}
(附页夹){
背景：红色；
光标：指针；
位置：相对位置；
}
.\tabu文件夹：悬停{
背景颜色：灰色
}
.\tabu文件夹：活动{
背景色：rgba（29,33,41,1）
}
位置{
对齐项目：居中；
显示器：flex
}
.i上下文：悬停。_1i5y，
.uipover.selected.\u 1i5y{
显示：块
}
.\u iconText{
对齐项目：居中；
显示器：flex；
证明内容：之间的空间；
宽度：100%；
左边距：13px；
}
._iconFolder，
.1i5x，
.1i5w{
显示：内联块；
右边距：5px；
垂直对齐：中间对齐
}
._5bme._i文件夹{
背景图片：url（/rsrc.php/v3/yE/r/miCSJRxMvJi.png）；
背景重复：无重复；
背景尺寸：自动；
背景位置：-412px-21px
}
.超跨度{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
排名：0；
}







名称
开始日期
结束日期
活动
...
...
...
批准
拒绝
名称
开始日期
结束日期
活动
...
...
...
删除
我将尝试总结以下几点：

html结构无效、无序列表（
ul
）且已排序
列表（
ol
）应仅包含列表项（
li
）
后代元素
active
类没有关闭非活动列表项
正确-通过将
.zf文件夹
嵌套在
列表项-无论如何都是有效的html结构，并且
在前一点中提到
为所讨论的元素声明的样式
：现在应该为
声明活动的
伪状态。活动的
列表
项目。您可能会删除那些
：active
样式
现在全部

调整的选择器：

.zf-folder:active ._sideFolder, li.active .zf-folder ._sideFolder {
  background-color: blue;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0px;
  width: 5px
}


._tabFolder:active, li.active ._tabFolder {
  background-color: rgba(29, 33, 41, 1)
}

代码片段演示：

.zf-folder:active ._sideFolder, li.active .zf-folder ._sideFolder {
  background-color: blue;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0px;
  width: 5px
}


._tabFolder:active, li.active ._tabFolder {
  background-color: rgba(29, 33, 41, 1)
}


$（文档）.ready（函数（）{
$（'table.table'）.DataTable（）；
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
$（$.fn.dataTable.tables（true））.dataTable（）.columns.adjust（）；
});
});
\u侧文件夹{
背景色：黑色；
身高：100%；
左：0；
位置：绝对位置；
顶部：0px；
宽度：5px
}
.zf文件夹：活动。_侧文件夹，
li.active.zf文件夹。\u侧文件夹{
背景颜色：蓝色；
身高：100%；
左：0；
位置：绝对位置；
顶部：0px；
宽度：5px
}
.zf文件夹a{
颜色：白色；
文字装饰：无；
}
(附页夹){
背景：红色；
光标：指针；
位置：相对位置；
}
.\tabu文件夹：悬停{
背景颜色：灰色
}
.\tabFolder:活动，li.active.\tabFolder{
背景色：rgba（29,33,41,1）
}
位置{
对齐项目：居中；
显示器：flex
}
.i上下文：悬停。_1i5y，
.uipover.selected.\u 1i5y{
显示：块
}
.\u iconText{
对齐项目：居中；
显示器：flex；
证明内容：之间的空间；
宽度：100%；
左边距：13px；
}
._iconFolder，
.1i5x，
.1i5w{
显示：内联块；
右边距：5px；
垂直对齐：中间对齐
}
._5bme._i文件夹{
背景图片：url（/rsrc.php/v3/yE/r/miCSJRxMvJi.png）；
背景重复：无重复；
背景尺寸：自动；
背景位置：-412px-21px
}
.超跨度{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
排名：0；
}







名称
开始日期
结束日期
活动
...
...
...
批准
雷耶茨