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

问题

I am struggling to make this work...I've been working on it for hours upon hours now and cannot figure it out. 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/

回答1:

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/

回答2:

Try this out:- http://jsfiddle.net/adiioo7/WgdXU/7/

JS:-

$(document).ready(function () {
    $('#profile_list a').click(function () {
        $('#profile_list a').removeClass("active");
        $(this).addClass('active');
    });
});

回答3:

Change your script as below :

$(document).ready(function () {
$('a.panel').click(function () {
    var a = $(this); // no need of having this variable as it is not being used. You can remove it.
    $(".active").removeClass("active");
    $(this).addClass('active');
});
});

回答4:

Since "profile_list" is an id use "#profile_list" instead of ".profile_list". Also for adding the class active you need not use the "."

Please try this.

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

Thanks

来源：https://stackoverflow.com/questions/18911800/making-a-link-stay-active-displaying-hover-effect-upon-click-using-javascript