jazz jazz - 1 month ago 9
CSS Question

Change the color of div when user clicks over it

I have a few div and when a user clicks on any one of them i wish to change its background color, and i also want that for the first time by default the first div should be active with the colored background

<div class="col-md-2 tabs">
<a href="#">
<p> First </p>
</a>
</div>
<div class="col-md-2 tabs">
<a href="#">
<p> Second </p>
</a>
</div>
<div class="col-md-2 tabs">
<a href="#">
<p> Third </p>
</a>
</div>


CSS that i am using is

.tabs.active a
{
background: black;
}


but the color is not changing. can anyone please tell where the code has gone wrong

Answer

You can simply use :focus Pseudo class with Tabindex.

But if you focus any other things, then the background style of tabs will be lost :(

.tabs>a>p:focus{ 
  background-color:gray !important;
  display:inline-block;
  color:#000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="1"> First </p>
    </a>
</div>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="2"> Second </p>
    </a>
</div>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="3"> Third </p>
    </a>
</div>

Comments