0

私のスクリプトは完全に機能しますが、ここに問題があります。高さ 40 ピクセルのボタン (ここではスプライト アクション) がありますが、上位 20 個のみが完全に表示されます。ボタンをクリックすると、つまり、下の 20px にパーフェクトが表示されます。しかし...問題、他のすべてをデフォルトに戻す方法をスクリプトに含めました（1つだけを選択する必要があります）。複数を選択できるため、修正できないように見えるこの問題を修正するにはどうすればよいですか** USERS は切り替えることができます ** 問題となっているスクリプトの最後の部分。ありがとう

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

1 に答える 1

1

たいしたことはありませんが、私が提案したいのは、CSS を使用してイメージ スプライトを作成することです。

実際の画像タグではなく、いくつかのblockリンク タグで背景画像を使用できます (これらのタグに必要な onClick を自由に再追加してくださいa)。

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

</p>

クリック機能は次のように簡単にできます。

$('.top_head li a').click(function() {
    $('.top_head li a').removeClass('selected');
    $(this).toggleClass('selected');
});
于 2012-09-14T21:06:17.100 に答える