Making a link stay active displaying hover effect upon click using JavaScript

Issue

I am struggling to make this work. I'd like to make it where if O.F. is clicked, the hover state stays active, if another link is clicked, for example, Founders, the hover state that was active on O.F. disappears and the hover state stays active on Founders. Where am I going wrong?

HTML:

<div id="profile_list">
     <h2>Members: 37</h2>
 <a href="#Original_Founder" class="panel">• O.F.</a>
 <a href="#Founder" class="panel">• Founder</a>
 <a href="#Leader" class="panel">• Leader</a>
 <a href="#Senior_Admin" class="panel">• Sr. Admin</a>
 <a href="#Junior_Admin" class="panel">• Jr. Admin</a>
 <a href="#Full_Member" class="panel">• Full-Member</a>
 <a href="#Greenhorn" class="panel">• Greenhorn</a>
 <a href="#Inactive" class="panel">• Inactive</a>
 <a href="#Legend" class="panel">• Legend</a>

</div>

CSS:

#profile_list {
    width: 250px;
    height: 328px;
    background-color: #333;
    background-image: -moz-linear-gradient(#777, #222);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#222));
    background-image: -webkit-linear-gradient(#777, #222);
    background-image: -o-linear-gradient(#777, #222);
    background-image: -ms-linear-gradient(#777, #222);
    background-image: linear-gradient(#777, #222);
    border: 1px solid #000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    float: left;
    position: relative;
    top: 20px;
    left: 20px;
    z-index: 2;
}
#profile_list h2 {
    width: 226px;
    height: 20px;
    padding: 10px 0;
    margin: 0 12px;
    border-bottom: 1px solid #444;
    float: left;
    color: #B45F04;
    font: 20px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}
#profile_list a {
    width: 218px;
    height: 20px;
    padding: 4px 12px 7px 20px;
    color: #A4A4A4;
    float: left;
    font: 18px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
    position: relative;
    top: 5px;
}
#profile_list a:hover, #profile_list a.active {
    background: rgba(204, 204, 204, 0.5);
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    color: #FFF;
}

JAVASCRIPT:

$(document).ready(function () {
    $('a.profile_list').click(function () {
        var a = $(this);
        $(this).addClass('.active');
    });
});

Here is a demo of what I have so far, but when I click on any link, the hover state does not stay active: http://jsfiddle.net/WgdXU/2/

Solution

replace

$(this).addClass('.active');

with

$(this).addClass('active');

you do not need to add . for addClass

and also Replace

$('a.profile_list').click(function () {

with

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

See Demo

Comment Edit

http://jsfiddle.net/WgdXU/8/

Answered By - Dipesh Parmar