0

我想制作 4 个按钮：当您单击它时，选择一个，其背景图像已更改，其他 3 个保持原始背景图像，除非用户将其悬停，而用户悬停按钮时，它会更改其背景图像。

如果我只使用：悬停，或：活动，点击后，背景图像将在我释放鼠标时恢复到原来的，或者只是移动鼠标，如果我使用点击功能，在它改变背景图像后它不能恢复或必须输入一段长代码来控制它。制作这4个按钮的最简单方法是什么？

我试过这个：有点笨拙，我在css中有：悬停，但它实际上缺少这段代码的悬停效果

$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 回答