使链接保持活动状态，在点击时使用javascript显示hover效果
我正在努力做这项工作……我现在已经工作了几个小时了，无法解决这个问题。 如果单击OF，则hover状态保持活动状态，如果单击另一个链接，例如Founders，则在OF上激活的hover状态消失，悬浮状态在Founders上保持活动状态。 我哪里错了？
HTML：
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'); }); });
这是我到目前为止的演示，但是当我点击任何链接时，hover状态不会保持活动状态： http ： //jsfiddle.net/WgdXU/2/
更换
$(this).addClass('.active');
同
$(this).addClass('active');
你不需要添加。 对于addClass
还有替换
$('a.profile_list').click(function () {
同
$('#profile_list a').click(function () {
见演示
评论编辑
试试这个： – http://jsfiddle.net/adiioo7/WgdXU/7/
JS： –
$(document).ready(function () { $('#profile_list a').click(function () { $('#profile_list a').removeClass("active"); $(this).addClass('active'); }); });
更改您的脚本如下：
$(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'); }); });
由于“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'); }); });
谢谢