使用 javascript 在单击时使链接保持活动显示悬停效果答案

【问题标题】：Making a link stay active displaying hover effect upon click using javascript使用 javascript 在单击时使链接保持活动显示悬停效果
【发布时间】：2013-09-20 08:07:31
【问题描述】：

我正在努力完成这项工作...我已经为此工作了几个小时，但无法弄清楚。如果O.F.，我想去哪里。单击时，悬停状态保持活动状态，如果单击另一个链接，例如 Founders，悬停状态在 O.F. 上处于活动状态。消失，悬停状态在 Founders 上保持活动状态。我哪里错了？

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');
    });
});

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

【问题讨论】：

标签： javascript jquery html css javascript-events

【解决方案1】：

替换

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

与

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

您不需要添加 .对于添加类

还有替换

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

与

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

See Demo

评论编辑

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

【讨论】：

dude.. 他指的是错误的 A 标签，该标签也需要更正。 :)
@GaneshPandhere 我知道我也添加了，
这非常接近，但是，在单击其他链接时，我希望删除悬停状态，这样一次只有 1 个链接处于活动状态，而不是单击时全部处于活动状态通过他们所有人......
完美，非常感谢，这正是我想要的！

【解决方案2】：

试试这个：- http://jsfiddle.net/adiioo7/WgdXU/7/

JS：-

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

【讨论】：

这将继续为每个元素添加类，这是不可取的操作。
这非常接近，但是，在单击其他链接时，我希望删除悬停状态，这样一次只有 1 个链接处于活动状态，而不是单击时全部处于活动状态通过他们所有人......
@user2732875 已经在更新的代码中处理了这种情况。
@user2732875 这是我已经做过的事情。那为什么我的代码被否决了？我得到了你的代码奇才孩子... :)
我不能给每个人正确的答案，但我确实给了你一个加1，因为你的方法也很有效！我将 Dipesh 的答案作为正确答案的唯一原因是因为他设法只使用了 5 行而不是 6 行。不过感谢您的帮助；）

【解决方案3】：

如下修改你的脚本：

$(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】：

因为“profile_list”是一个 id，所以使用“#profile_list”而不是“.profile_list”。此外，对于添加活动类，您无需使用“。”

请试试这个。

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

谢谢

【讨论】：