[css] How to keep :active css style after clicking an element

I use anchor as my site navigation.

<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>

The CSS

#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}

I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?

You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...

It should look something like this: (untested!)

/*In your stylesheet*/
.activeItem{
   background-color:#999; /*make some difference for the active item here */
}


/*In your javascript*/
var prevItem = null;
function activateItem(t){
   if(prevItem != null){
      prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
   }
   t.className += " activeItem";
   prevItem = t;
}

<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>

I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY

We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"

--

To make content itself clickable:

#activate-div{display:none}

.my-div{background-color:#FFF}

#activate-div:checked ~ label
.my-div{background-color:#000}

<input type="checkbox" id="activate-div">
<label for="activate-div">
  <div class="my-div">
    //MY DIV CONTENT
  </div>
</label>

To make button change content:

#activate-div{display:none}

.my-div{background-color:#FFF}

#activate-div:checked +
.my-div{background-color:#000}

<input type="checkbox" id="activate-div">
<div class="my-div">
  //MY DIV CONTENT
</div>

<label for="activate-div">
  //MY BUTTON STUFF
</label>

Hope it helps!!

The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target

It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr

Here is a tab example with :target-pseudo selector.

If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:

a.example:active, a.example:visited {
/* Put your active state style code here */ }

The Link visited Pseudo Class is used to select visited links as says the name.

Combine JS & CSS :

button{
  /* 1st state */
}

button:hover{
  /* hover state */
}

button:active{
  /* click state */
}

button.active{
  /* after click state */
}


jQuery('button').click(function(){
   jQuery(this).toggleClass('active');
});