Question

我想制作4个按钮：当你点击它时，选择的那个，它的背景图像改变了，另外3个仍然是原始的背景图像，除非用户将鼠标悬停在它上面，而用户将鼠标悬停在按钮上则会改变它的背景图像。

如果我只使用：hover，或者：active，点击后，当我发布鼠标时背景图像将恢复为原始状态，或者只是移开鼠标，如果我使用点击功能，在更改背景图像后它无法恢复或者必须输入长片代码来控制它。制作这4个按钮最简单的方法是什么？

我试过这个：abit笨拙，我有：在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%");
    }
});

Answer 1

我刚刚完成了我的目标，所以我在这里发布我的代码，我认为这是最简单的方法，而且清晰

$(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();
});

什么是这4个按钮最简单的方法？

1 个答案: