Jquery 원래 값으로 돌아 가기

Question

제 스크립트가 완벽하게 작동하지만 여기에 문제가 있습니다. 40px 높이이지만 상위 20 개만 완벽하게 보여주는 버튼 (Sprite 액션)이 있습니다. 버튼을 클릭하면 img 하단 20px에서 perfecto가 표시됩니다. 하지만 ... 문제, 내 스크립트에 다른 모든 사람들을 기본값 (단 하나만 선택해야 함)으로 되돌려주는 방법이 포함되어 있습니다.이 문제를 해결할 수있는 방법은 여러 가지를 선택할 수 있기 때문에 해결할 수없는 것입니다 ** USERS can switch ** 스크립트의 마지막 부분입니다. 감사합니다

$(document).ready(function() { 
    $('.form_sub').hide(); 
    $('.theader').addClass('active'); 

    $('.theader_t').click(function() { 
     $('.form_header').show(); 
     $('.form_sub').hide(); 
     $('.theader').addClass('active'); 
     $('.sub_theader').removeClass('active'); 
    }); 
    $('.sub_theader_t').click(function() { 
     $('.form_header').hide(); 
     $('.form_sub').show(); 
     $('.theader').removeClass('active'); 
     $('.sub_theader').addClass('active'); 
    }); 

    $('.top_head_img').click(function() { 
     $(this).css({ 
      position: 'relative', 
      bottom: '20px' 
     }).siblings().css(
      'bottom', '0' 
     ); 
    }); 
}); 

<ul class="top_head"> 
    <li> 
    <a href="javascript:void(0)" onClick="selectPic5('top');"><img src="custom/images/top2.jpg" alt="Left" border="0" class="top_head_img"/></a> 
    </li> 
    <li> 
    <a href="javascript:void(0)" onClick="selectPic5('center');"><img src="custom/images/mid2.jpg" alt="Center" border="0" class="top_head_img"/></a> 
    </li> 
    <li> 
    <a href="javascript:void(0)" onClick="selectPic5('bottom');"><img src="custom/images/bot2.jpg" alt="Right" border="0" class="top_head_img"/></a> 
    </li> 
</ul> 

Answer 1

아주 많이 가지 않고도, 이것이 제가 제안하는 것입니다 : CSS를 사용하여 이미지 스프라이트를 만드십시오.

<ul class="top_head"> 
    <li> 
    <a href="#"></a> 
    </li> 
    <li> 
    <a href="#"></a> 
    </li> 
    <li> 
    <a href="#"></a> 
    </li> 
</ul>​ 

스프라이트 물건을 CSS에서 :

오히려 실제 이미지 태그보다, 당신은 (당신이이 a의에 무엇을해야 onClicks 다시 추가 부담) 일부 block 링크 태그에 배경 이미지를 사용할 수 있습니다 :

.top_head li a { 
    height: 20px; 
    width: 20px; 
    display: block; 
    background: url(http://lorempixel.com/20/40/abstract) 0 0 no-repeat; 
    overflow: hidden; 
    margin: 5px; 
} 
.top_head li a.selected { 
    background: url(http://lorempixel.com/20/40/abstract) 0 -20px no-repeat; 
} 

그리고 당신의 클릭 기능 할 수이 아니라 우리와 같은 간단한 :

$('.top_head li a').click(function() { 
    $('.top_head li a').removeClass('selected'); 
    $(this).toggleClass('selected'); 
});