1

ホバーすると、マウスが置かれているフィールドの色が変わる小さなメニューをコーディングしました。以下、css onclick を jquery 経由で変更します。

ただし、css hover-effect は今後機能しません。クリック後にホバー効果を有効にしたいと思います。

コード: (jfiddle: http://jsfiddle.net/Cwmpf/を参照)

.vbtn { color:#000B41; }
.vbtn:hover { background-color:#1A2040; color:white; cursor:pointer; }

<div id="overskrift1" class="vbtn" felt="1">Vare</div>
<div id="overskrift2" class="vbtn" felt="2">Guide</div>

<script type="text/javascript">
    $('div.vbtn').click( function() {
        $('div.vbtn').css({'background-color':'white','color':'#000B41'});
        $(this).css('background-color','#1A2040');
        $(this).css('color','white');
        felt = $(this).attr('felt');
        $('div.vniv').each(function() {
            if($(this).attr('felt') != felt) { $(this).css('display','none'); }
            else { $(this).css('display','block'); }
        });
    });
</script>
4

1 に答える 1

1

.activeアクティブな div のスタイルを保持するクラスを追加します。

.active{
    background-color: #1A2040;
    color: white;

}

次に、このクラスをJSで切り替えます

$('div.vbtn').click( function() {
    $("div.vbtn").removeClass("active");
    $(this).addClass("active");
    felt = $(this).attr('felt');
    $('div.vniv').each(function() {
        if($(this).attr('felt') != felt) { $(this).css('display','none'); }
        else { $(this).css('display','block'); }
    });
});

JSFIDDLE: http://jsfiddle.net/Cwmpf/1/

于 2013-08-15T08:40:18.773 に答える