How to make css a:active work after the click?

Question

I am trying to make a menu working as tabs. The tabs themselves are working fine and the menu links are great aswell.. But I'd like to remove the buttom border of the active tab, to make it look like you're on that actual page. I've tried using #id a:active but it seems to work only as long as I press the link. I've had the though about doing it by javascript aswell, but I can't seem to figure out a way to do it. Here's my css for active.

CSS: (please let me know if you'll need more of my css)

#navigation a:active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

Thanks, /Pyracell

Answer 1

I'm a little late to the party, but I have a simple answer using css only. Give each page a unique id, give each menu item a unique id (or class in this case), style your links as you like for when you are not on the page, then style them as you want them if you are on the page. The css matches when you click on the menu item and it loads the page. So whatever page you are on, the menu item appears "active". Below I have it to where the current page menu button text changes color but you can use the visible property to show and hide images or use any css to style it. (Also in this example is css to change things on hover too.) In addition, this method allows you to write separate css for each menu button, so each menu button can do something different than the others if you wish.

#menu {
  padding-top: .5em;
  text-align: center;
  font-family: 'Merriweather Sans';
  font-size: 1.25em;
  letter-spacing: 0;
  font-weight: 300;
  color: #003300;
 }
#menu a {
  text-decoration: none;
  color: #003300;
}
#menu a:visited {
  color: #003300;
}
#menu a:hover {
  font-style: italic;
}

#home a.home, 
#about a.about,
#edc a.edc,
#presentations a.presentations,
#store a.store,
#contact a.contact {
  font-weight: 800;
  color: #660000;
}
#home a.home:hover,
#about a.about:hover,
#edc a.edc:hover,
#presentations a.presentations:hover,
#store a.store:hover,
#contact a.contact:hover
{
  font-style: normal;
}