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

Add and remove a class when you select a tab link..

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

and use the script (jQuery version)

$(function(){

    $('#navigation a').click(function(){

        $('#navigation .active').removeClass('active'); // remove the class from the currently selected
        $(this).addClass('active'); // add the class to the newly clicked link

    });

});

From your demo link in the comments on another answer, JavaScript will not be of any help, it should be done in your PHP code. Something in the lines of:

<a <?php if (this_tab_is_selected){ ?>class='active' <?php } ?>href='LINK_TO_TAB' >
    TAB_NAME
</a>

Mentioning that changing tabs is redirecting to another page could have helped with better responses from the start xD

Depending on your code and how you are creating the tabs, you need to change the this_tab_is_selected to a code that returns true for the selected tab.

P.S. You still need to make the modification mentioned in the other answer in your CSS. (Which is to change #navigation a:active to #navigation a.active)

A crude way to do this with JavaScript (jQuery)

  $('a[href]').each(function() {
    if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href)
      $(this).addClass('active');
  });