2

私はこれを機能させるのに苦労しています...私は今何時間もそれに取り組んできましたが、それを理解することはできません. OFをクリックするとホバー状態がアクティブのままになり、別のリンク、たとえばファウンダーをクリックすると、OFでアクティブだったホバー状態が消え、ファウンダーでホバー状態がアクティブのままになるようにしたいと思います。どこが間違っていますか？

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

ジャバスクリプト:

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

これは私がこれまでに持っているもののデモですが、リンクをクリックしてもホバー状態はアクティブのままではありません: http://jsfiddle.net/WgdXU/2/

4

4 に答える 4

2

交換

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

と

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

を追加する必要はありません。addClass の

また、置き換えます

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

と

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

デモを見る

コメント編集

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

于 2013-09-20T08:12:22.787 に答える