這4個按鈕最簡單的方法是什麼？

Question

我想製作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%"); 
    } 
}); 

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