jQuery를 사용하지 않고 click()을 클릭하면 이미지가 변경됩니다.

Question

안녕하세요, 친구가 링크를 클릭했지만 이미지를 변경하려고했지만 친구가 실패했습니다. 시나리오는 내가 각 탭은 그 회색 이미지를 클릭하면 사용자가 다른 탭을 클릭하면 이전의 흰색 이미지가 회색 색상으로 돌아가고 새로운 이미지가 바뀔 것입니다 흰색으로 바뀔 것이라고 회색 색상의 다른 이미지가 메뉴를 구축하고있다 흰색 당신은

$('.footerMenu li a').on('click', function() { 


    $('.footerMenu li a').children('img.active').each(function(index, element) { 
     $(this).css('display','none'); 
    }); 

    //$('.footerMenu li a img.active').hide(); 
    //$(this).children('img').css('display','none'); 
    $(this).children('img.active').css('display','inline'); 

    if($(this).children('img:not(.active)').css('display')== 'none') 
    { $(this).children('img:not(.active)').css('display','inline'); 
     } 
     else 

    { $(this).children('img:not(.active)').css('display','none'); 
      } 


}) 

<ul data-role="list-divider" class="footerMenu"> 
     <li><a href="#"> 
     <img src="http://s16.postimg.org/6fnxrzxu9/friends_Icon.png" width="114" height="77" alt=" " /> 
     <img src="http://s16.postimg.org/7j823yihd/friends_Iconwh.png" width="114" height="77" alt=" " class="active"/><br /> 
      Friends</a></li> 
     <li><a href="#"> 
     <img src="http://s16.postimg.org/5we94zh1t/cards_Icon.png" width="114" height="77" alt=" " /> 
     <img src="http://s16.postimg.org/mivte29zl/cards_Iconwh.png" width="114" height="77" alt=" " class="active" /><br /> 
      Cards</a></li> 
     <li><a href="#"> 
     <img src="http://s16.postimg.org/vt7xhlkpd/egreeting_Icon.png" width="114" height="77" alt=" " /> 
     <img src="http://s16.postimg.org/lacj667f5/egreeting_Iconwh.png" width="114" height="77" alt=" " class="active"/><br /> 
      Egreeting</a></li> 
     <li><a href="#"> 
     <img src="http://s16.postimg.org/hukewma6p/post.png" width="114" height="77" alt=" " /> 
     <img src="http://s16.postimg.org/nk0ngxgcx/postwh.png" width="114" height="77" alt=" " class="active" /><br /> 
      Post</a></li> 
     <li><a href="#"> 
     <img src="http://s16.postimg.org/4jwk33jm9/custom_Icon.png" width="114" height="77" alt=" " /> 
     <img src="http://s16.postimg.org/qkcwjq2a9/custom_Iconwh.png" width="114" height="77" alt=" " class="active"/><br /> 
      Custom</a></li> 
     </ul> 

SCRIPT을 아래에 내 코드를 확인하거나 can see fiddle here

HTML 수 있습니다

CSS

body{background:red;} 
.footerMenu img.active{display:none;} 

시도 사전 :

Answer 1

나에게 guys..Thanks 도와주세요

var $as = $('.footerMenu li a'), $imgs = $as.find('img'); 
$as.on('click', function() { 
    var $this = $(this), $cimgs = $this.find('img'); 
    $as.find('img:first-child').removeClass('active'); 
    $as.find('img:gt(0)').addClass('active'); 
    $cimgs.eq(1).removeClass('active'); 
    $cimgs.eq(0).addClass('active'); 
}) 

데모 : Fiddle