使链接保持活动状态，在点击时使用javascript显示悬停效果 [英] Making a link stay active displaying hover effect upon click using javascript

问题描述

我正在努力完成这项工作......我现在已经花了几个小时研究它并且无法解决这个问题。如果O.F.我想把它放在哪里单击，如果单击另一个链接，则悬停状态保持活动状态，例如，Founders，即O.F上处于活动状态的悬停状态。消失，悬停状态在创始人上保持活跃状态​​。我哪里错了？

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：

JAVASCRIPT:

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

这是我到目前为止的演示，但是当我点击任何链接时，悬停州不会保持活跃状态​​： http://jsfiddle.net/WgdXU/2/

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/

推荐答案

替换

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

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

您无需添加。 for addClass

you do not need to add . for addClass

以及替换

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

with

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

参见演示

评论修改

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

这篇关于使链接保持活动状态，在点击时使用javascript显示悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！