Question

我有以下选项卡，当我点击任何一个div时，我需要将背景颜色更改为蓝色，如果我在其他div上显示，则之前的选项卡颜色需要设置为原始和新点击的div颜色为是蓝色等等：

这是我的HTML：

                          <div class="zoom_controls">
                              <a class="db" id="prof_cpu_d" href="#" data-chart="line" data-range="1m">Real Time</a>
                              <a class="db" id="prof_cpu_w"href="#" data-chart="line" data-range="3m">Weekly</a>
                              <a class="db" id="prof_cpu_m" href="#" data-chart="line" data-range="6m">Monthly</a>
                        </div>

我有这个：

.zoom_controls a:active {
            background-color: #a6d1ff;
}

它似乎无法正常工作

我将如何在css中执行此操作？

Answer 1

您需要使用Javascript / jQuery来切换课程。你不能用纯CSS做到这一点。

修改CSS

.zoom_controls a.active {
  background-color: #a6d1ff;
}

<强>的jQuery

$('.zoom_controls a').on('click', function(event){
  event.preventDefault();

  $('.zoom_controls a').removeClass('active'); //Remove color for all with class .zoom_controls
  $(this).toggleClass('active'); //Apply bgcolor to clicked element
});

Codepen sketch

<强>更新如果您出于某种原因想到a:hover，那么您可以在CSS中这样做。

.zoom_controls a:hover {
  background-color: #a6d1ff;
}

否则，如果您希望定位链接的“活动”状态，那么您正在正确执行此操作。

Answer 2

:active状态仅适用于锚点活动时 - 也就是说，当用户点击它时。当点击结束时，状态也是如此。你想要的东西不能用纯CSS完成。

<强> CSS ：

.zoom_controls a.active {
  background-color: #a6d1ff;
}

<强>的jQuery ：

$('.zoom_controls a').on('click', function(ev) {
  ev.preventDefault();

  $(this).addClass('active').siblings('.active').removeClass('active');
});

<强> JSBin demo

Answer 3

您可以使用JS库jquery选择活动选项卡并指定背景颜色。使用jquery的好处是它与其他浏览器的兼容性。

Answer 4

它工作，但它没有做你想要的。因为active只是一个dynamic pseudo-class，它决定了活动元素的样式（在这种情况下，在点击时，div中的所有链接都与类zoom_controls相关联）

您可能需要JavaScript来完成这项工作，或者是一种不必要的复杂CSS 3解决方案。

单击时更改div的背景颜色

4 个答案: