0

我有由以下组成的选项卡，当我单击任何 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 中做到这一点？

4

4 回答 4

3

您需要使用 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 草图

更新 如果您出于某种原因正在考虑a:hover，那么您可以在 CSS 中这样做。

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

否则，如果您希望以链接的“活动”状态为目标，那么您的做法是正确的。

于 2013-08-27T17:16:58.197 回答
1

该: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 演示

于 2013-08-27T17:19:28.867 回答
0

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

于 2013-08-27T17:20:21.317 回答
0

它确实有效，但它没有做你想做的事。因为active只是一个动态伪类，它决定了活动元素的样式（在这种情况下，div 内的任何链接都带有类zoom_controls，当它被单击时）。

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

于 2013-08-27T17:22:58.343 回答