jquery - jQuery将值恢复为原始值

所以我的脚本运行完美，但这是问题所在，我有40px高度的按钮（此处为Sprite动作），但前20个按钮只能完美显示。当您单击按钮即img时，底部20像素显示完美！但是...问题，我在脚本中包含了一种将所有其他默认值恢复为默认值的方法（现在应该只选择一个），如何解决这个我似乎无法解决的问题，因为我可以选择多个**用户可以切换**问题的脚本的最后一部分。谢谢

$(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>

最佳答案

无需太多努力，这就是我的建议：使用CSS制作图像精灵。

您可以在某些block链接标签上使用背景图像，而不是实际的图像标签（可以随意在这些a上重新添加所需的onClicks）：

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

CSS中的精灵内容：

.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');
});

关于jquery - jQuery将值恢复为原始值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12431883/