0

私は 4 つのボタンを作成したいと思います: クリックすると、選択されたもの、その背景画像が変更され、他の 3 つはユーザーがホバーしない限り元の背景画像のままで、ユーザーがボタンをホバーすると背景画像が変更されます。

:hover または :active のみを使用すると、クリック後にマウスを離したり、マウスを離したりしたときに背景画像が元に戻ります。それを制御するための長いピース コードを入力します。これらの 4 つのボタンを作成する最も簡単な方法は何ですか?

私はこれを試しました：ちょっと不器用です、CSSに:hoverがありますが、実際にはこのコードのホバー効果がありません

$s_btn_1.on('click',function() {
        if (chosen!=1){
            chosen = 1; 
            console.log('chosen');
        $.get("services_1.php", function(data){
         // $service_box.html(data);

        }); 

        return_default();

        $folder1.css('background',"url('images/services/btn1_hover.png')");
        $folder1.css('background-size',"100% 100%");

    }

    });

  $s_btn_2.on('click',function() {
        if (chosen!=2){
            chosen = 2;
            console.log('chosen');

            $.get("services_2.php", function(data){
        //      $service_box.html(data);
            });
            return_default();

            $folder2.css('background',"url('images/services/btn2_hover.png')");
            $folder2.css('background-size',"100% 100%");
        }
    });

    $s_btn_3.on('click',function() {
        if (chosen!=3){
            chosen = 3;
            return_default();

            $folder3.css('background',"url('images/services/btn3_hover.png')");
            $folder3.css('background-size',"100% 100%");
        }
    });

    $s_btn_4.on('click',function() {
        if (chosen!=4){
            chosen = 4;
            return_default();

            $folder4.css('background',"url('images/services/btn4_hover.png')");
            $folder4.css('background-size',"100% 100%");
        }
    });
  //$("#service_btn").addClass(".folder1_hover");
    function return_default(){
        $folder1.css('background-image',"url('images/services/btn1.png')");
        $folder2.css('background-image',"url('images/services/btn2.png')");
        $folder3.css('background-image',"url('images/services/btn3.png')");
        $folder4.css('background-image',"url('images/services/btn4.png')");
        $folder1.css('background-size',"100% 100%");
        $folder2.css('background-size',"100% 100%");
        $folder3.css('background-size',"100% 100%");
        $folder4.css('background-size',"100% 100%");
    }
});
4

1 に答える 1

0

目標を達成したばかりなので、ここにコードを投稿します。これが最も簡単な方法であり、明確であると思います。

$(document).ready(function() {   
     var btns = {
         'bg_o' : ['images/services/btn1.png','images/services/btn2.png','images/services/btn3.png','images/services/btn4.png'],
         'bg_h' : ['images/services/btn1_hover.png','images/services/btn2_hover.png','images/services/btn3_hover.png','images/services/btn4_hover.png'],
         '$all_btn' : $('.all_btn'),
         '$folders':[$('#folder1'),$('#folder2'),$('#folder3'),$('#folder4')],
         'folders_status':new Array('inactive','inactive','inactive','inactive')
         ,jquery_func : function(){
            btns.$all_btn.each(function(){
                $(this).click(function(){
                    for(i=0;i<4;i++){
                        var imageurl_o = new Array();
                        imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};       
                        btns.$folders[i].css(imageurl_o[i]);    
                        btns.folders_status[i]='inactive';
                    }
                    for(i=0;i<4;i++){           
                        var myparent = btns.$folders[i].parent();                       
                        if($(this).attr('class') == myparent.attr('class')){
                            var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
                            btns.$folders[i].css(imageurl_h);   
                            btns.folders_status[i]='active';
                        }   
                    }
                });
                $(this).mouseover(function(){
                    for(i=0;i<4;i++){
                        var imageurl_o = new Array();
                        imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
                        if(btns.folders_status[i]=='inactive')
                        btns.$folders[i].css(imageurl_o[i]);    
                    }
                    for(i=0;i<4;i++){           
                        var myparent = btns.$folders[i].parent();                       
                        if($(this).attr('class') == myparent.attr('class')){
                            var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
                            btns.$folders[i].css(imageurl_h);   
                        }   
                    }

                });
            }); 
         }
     }
     btns.jquery_func();
});
于 2012-11-24T05:58:40.530 に答える