change the background colour of divs when clicked - html

Question

I have tabs comprised of the following, When I clicked on any of the divs, I need background colour change to blue and if I clicke on other div, the previous tabs colour needs to set to original and new clicked div colour to be blue and so on:
This is my 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>
I have this:
.zoom_controls a:active {
background-color: #a6d1ff;
}
it does not seem to be working
how would I do this in css?

Answer 1

You need to use Javascript/jQuery to toggle the class. You can't do this with pure CSS.
Modify 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
Update
If you are, for some reason, thinking about a:hover, then you do it like this in CSS.
.zoom_controls a:hover {
background-color: #a6d1ff;
}
Otherwise, if you are looking to target the 'active' state of the link, you are doing it correctly.

Answer 2

The :active state only applies when the anchor is active -- that is, when the user is clicking on it. When that click ends, so does the state. What you want can't be done with pure 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

You can use the JS library jquery to select the active tabs and assign the the background color. The nice bit with using jquery is it's compatibility with other browsers.

Answer 4

It does work, but it's not doing what you want. Because active is only a dynamic pseudo-class that determines the styling of an active element (in this case any link inside the div with class zoom_controls when it's being clicked).
You might need JavaScript for this job, that or an unnecessarily complex CSS 3 solution.