Question

我的默认._sideFolder的{{1}}颜色为background

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

selected

单击时仅显示蓝色。

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

My JSFiddle

我想在左边的图片中显示。

仅供参考：在我的项目中，我使用.zf-folder:active ._sideFolder { background-color: blue; height: 100%; left: 0; position: absolute; top: 0px; width: 5px }与._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;
}

Answer 1

我将尝试总结一些事项：

html结构无效，无序列表（ul）并已订购列表（ol）应仅包含直接列表项（li）后裔元素。
active类没有切换非活动列表项正确 - 通过嵌套.zf-folder来纠正这种行为列表项 - 无论如何都是有效的html结构而且是在前一点解决。
您为相关元素声明的样式现在应该为:active列表声明.active 伪状态 项目。你可以取消那些:active样式现在一共。

Updated 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

可能有点晚了。但这就是你如何做到的。

此方法表示从style移除所有divs，然后将其添加到clicked

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

点击Fiddle

希望这有帮助

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

2 个答案: