激活或选择按钮时更改背景颜色

Question

我有默认的._sideFolder ， background色为black

我想在selected button时将bgcolor更改为blue

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

仅在单击时才显示蓝色。

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

我的JSFiddle

我想显示如左图所示。

仅供参考：在我的项目中，我使用._sideFolder ， background-color: red;

 $(document).ready(function() { $('table.table').DataTable(); $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { $($.fn.dataTable.tables(true)).DataTable().columns.adjust(); }); }); 

 ._sideFolder { background-color: black; height: 100%; left: 0; position: absolute; top: 0px; width: 5px } .zf-folder:active ._sideFolder { background-color: blue; height: 100%; left: 0; position: absolute; top: 0px; width: 5px } .zf-folder a { color: white; text-decoration: none; } ._tabFolder { background: red; cursor: pointer; position: relative; } ._tabFolder:hover { background-color: grey } ._tabFolder:active { background-color: rgba(29, 33, 41, 1) } ._itemPosition { align-items: center; display: flex } ._iconText:hover ._1i5y, .uiPopover.selected ._1i5y { display: block } ._iconText { align-items: center; display: flex; justify-content: space-between; width: 100%; margin-left: 13px; } ._iconFolder, ._1i5x, ._1i5w { display: inline-block; margin-right: 5px; vertical-align: middle } ._5bme ._iconFolder { background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png); background-repeat: no-repeat; background-size: auto; background-position: -412px -21px } .hyperspan { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="nav"> <div class="zf-folder"> <li class="active"> <div id="tabFolder" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;"> <div class="_sideFolder"></div> <div class="_iconText" style="width: 215px"> <div class="ellipsis"> <div class="_iconFolder"> <div class="_icon-col"> </div> </div> <a href="#mainFolder" aria-controls="mainFolder" data-toggle="tab">Main Folder<span class="hyperspan"></span></a> </div> </div> </div> </li> </div> <div class="zf-folder"> <li> <div id="tabFolder2" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;"> <div class="_sideFolder"></div> <div class="_iconText" style="width: 215px"> <div class="ellipsis"> <div class="_iconFolder"> <div class="_icon-col"> </div> </div> <a href="#secondFolder" aria-controls="secondFolder" data-toggle="tab">Second Folder<span class="hyperspan"></span></a> </div> </div> </div> </li> </div> </ul> <!-- CONTENT --> <div class="tab-content"> <div class="tab-pane fade in active" id="mainFolder"> <div class="zf-table"> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Name</th> <th>Start Date</th> <th>End Date</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> <td>...</td> <td> <button class="btn btn-success btn-xs approve-off" type="submit" value="approve"> <span class="fa fa-check-square-o"></span> Approve </button> <button class="btn btn-danger btn-xs reject-off" type="submit" value="reject"> <span class="fa fa-times"></span> Reject </button> </td> </tr> </tbody> </table> </div> </div> <div class="tab-pane fade in" id="secondFolder"> <div class="zf-table"> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Name</th> <th>Start Date</th> <th>End Date</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> <td>...</td> <td> <input hidden="hidden" name="offId" /> <button class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete"> <span class="fa fa-times"></span> Delete </button> </td> </tr> </tbody> </table> </div> </div> </div> 

Answer 1

我将尝试总结几件事：

1. html结构无效，无序列表（ ul ）和有序列表（ ol ）仅应包含列表项（ li ）作为直接后代元素。
2. active类未正确切换非活动列表项-通过在列表项中嵌套.zf-folder纠正了此问题-无论如何这都是有效的html结构，已在前一点解决。
3. 现在，应该为.active列表项声明已为有关:active 伪状态的元素声明的样式。 您现在可以完全取消那些:active样式。

更新了JSFiddle

调整选择器：

.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)
}

代码段演示：

 $(document).ready(function() { $('table.table').DataTable(); $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { $($.fn.dataTable.tables(true)).DataTable().columns.adjust(); }); }); 

 ._sideFolder { background-color: black; height: 100%; left: 0; position: absolute; top: 0px; width: 5px } .zf-folder:active ._sideFolder, li.active .zf-folder ._sideFolder { background-color: blue; height: 100%; left: 0; position: absolute; top: 0px; width: 5px } .zf-folder a { color: white; text-decoration: none; } ._tabFolder { background: red; cursor: pointer; position: relative; } ._tabFolder:hover { background-color: grey } ._tabFolder:active, li.active ._tabFolder { background-color: rgba(29, 33, 41, 1) } ._itemPosition { align-items: center; display: flex } ._iconText:hover ._1i5y, .uiPopover.selected ._1i5y { display: block } ._iconText { align-items: center; display: flex; justify-content: space-between; width: 100%; margin-left: 13px; } ._iconFolder, ._1i5x, ._1i5w { display: inline-block; margin-right: 5px; vertical-align: middle } ._5bme ._iconFolder { background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png); background-repeat: no-repeat; background-size: auto; background-position: -412px -21px } .hyperspan { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } 

 <script type="text/javascript" src="/js/lib/dummy.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="nav"> <li class="active"> <div class="zf-folder"> <div id="tabFolder" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;"> <div class="_sideFolder"></div> <div class="_iconText" style="width: 215px"> <div class="ellipsis"> <div class="_iconFolder"> <div class="_icon-col"> </div> </div> <a href="#mainFolder" aria-controls="mainFolder" data-toggle="tab">Main Folder<span class="hyperspan"></span></a> </div> </div> </div> </div> </li> <li> <div class="zf-folder"> <div id="tabFolder2" class="_tabFolder _itemPosition" style="height: 40px;border-bottom:1px groove; user-select: none;"> <div class="_sideFolder"></div> <div class="_iconText" style="width: 215px"> <div class="ellipsis"> <div class="_iconFolder"> <div class="_icon-col"> </div> </div> <a href="#secondFolder" aria-controls="secondFolder" data-toggle="tab">Second Folder<span class="hyperspan"></span></a> </div> </div> </div> </div> </li> </ul> <!-- CONTENT --> <div class="tab-content"> <div class="tab-pane fade in active" id="mainFolder"> <div class="zf-table"> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Name</th> <th>Start Date</th> <th>End Date</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> <td>...</td> <td> <button class="btn btn-success btn-xs approve-off" type="submit" value="approve"> <span class="fa fa-check-square-o"></span> Approve </button> <button class="btn btn-danger btn-xs reject-off" type="submit" value="reject"> <span class="fa fa-times"></span> Reject </button> </td> </tr> </tbody> </table> </div> </div> <div class="tab-pane fade in" id="secondFolder"> <div class="zf-table"> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Name</th> <th>Start Date</th> <th>End Date</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> <td>...</td> <td> <input hidden="hidden" name="offId" /> <button class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete"> <span class="fa fa-times"></span> Delete </button> </td> </tr> </tbody> </table> </div> </div> </div> 

Answer 2

可能会晚一点。 但这就是您可以做到的。

这种方法表示要从所有divs删除style ，然后将其添加到clicked的style

$('._tabFolder').click(function(){
 $("._tabFolder").css("cssText", "height: 40px; border-bottom: 1px groove; user-select: none; border-left: solid 0px;");

   $(this).css("cssText", "height: 40px; border-bottom: 1px groove; user-select: none; border-left: solid 5px;");
})

在这里检查小提琴

希望这可以帮助