1

このボタンをアクティブにしたときに、イメージ「bars_small.png」(ホバー時に表示される白いイメージ) を適用したいと考えています。

jQuery: 

        $("#btn_bars").click(function(){
            if(!$(this).hasClass('btn_header_active')){
                    $('.ch-grid .btn_header_active').removeClass('.btn_header_active');
                    $(this).addClass('btn_header_active');
                });
            }
        });

CSS:

#btn_bars .btn_header_active .ch-info{

    background-image: url(http://www.zwoop.be/develop/images/fisheye/bars_small.png);
    background-repeat: no-repeat;
    background-position: center;
}

完全なメニュー コードと視覚効果については、この jsFiddle を参照してください: http://jsfiddle.net/kimgysen/6ryav/

4

1 に答える 1

3

クリック関数を次のように変更した場合:

$(".ch-item").click(function(){
    var thisButton = $(this);
    if(!thisButton.hasClass('btn_header_active')){
        $('.ch-grid .btn_header_active').removeClass('btn_header_active');
        thisButton.addClass('btn_header_active');
        active_header = 1;
    }
});

次に、cssセレクターをから#btn_bars .btn_header_active .ch-infoに変更します#btn_bars.btn_header_active .ch-info（クラスはidを持つ要素にあり、そのサブ要素ではないため、idと最初のクラスの間にスペースはありません）必要に応じて機能するはずです：

デモ

于 2013-10-02T13:06:31.093 に答える