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

Question

I have default ._sideFolder with background color of black

I want to change the bgcolor into blue when the button is selected

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

The blue color only appears when clicked.

I am really confused with my pseudo CSS. Should I use JavaScript in here?

My JSFiddle

I want to display like in the picture on the left.

FYI: In my project I use ._sideFolder with 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

A few things I'll try to summarise:

1. The html structure was invalid, unordered lists ( ul ) and ordered lists ( ol ) should only contain list items ( li ) as direct descendant elements.
2. The active class was not toggling off inactive list items correctly - this behaviour was rectified by nesting .zf-folder inside of the list items - which is valid html structuring anyway and was addressed in the former point.
3. The styles you have declared for the elements in question for :active pseudo-states should now be declared for .active list items. You could probably do away with those :active styles altogether now.

Updated JSFiddle

Adjusted Selectors:

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

Code Snippet Demonstration:

 $(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

May be a bit late. But this is how you can do it.

This approach says to remove the style from all of the divs and then add it to the clicked one

$('._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;");
})

Check here the Fiddle

Hope this helps