0

divをクリックすると背景画像を変更したいdiv要素があり、もう一度クリックすると画像が元に戻ります。Div CSS コードは以下のとおりで、そのクラスと ID を示しています。

.tab_box
{
width:2%;
height:20%;
position:absolute;
left:100%;
}

#tab_box1
{
background:url('cars.png') no-repeat center center;
background-size:120%;
-moz-background-size:120%;
-o-background-size:120%;
-ms-background-size:120%;
}

同じ「クラス」を使用する他の3つのdivがあり、それぞれに個別の「id」があり、個別の画像を提供します。

toggleClass を使用して次の j-query/css を試しましたが、うまくいかないようです:

.one
{
width:2%;
height:20%;
background:url('mots.png') no-repeat center center;
background-size:120%;
position:absolute;
left:100%;
}
<script>
$(document).ready(function(){
$('#tab_box1').click(function() {
$('#tab_box1'').toggleClass("one")
});
});
</script>

どこが間違っているのか、または画像を前後に切り替えるためにtoggleClass以外のどの方法を使用できるかについての提案はありますか?

4

2 に答える 2

0

これにより、div がボタンのように動作し、マウスを押したままにすると別の画像にスワップし、マウス ボタンを放すと元の画像に戻ります。

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(image2.jpg)'}) 
}).mousedown(function(){
    $(this).css({'background-image': 'url(image1.jpg)'}) 
});

HTML:

<div id="button1" style="background-image:url('image1.jpg');"></div>

ソース/参考文献:

CSS background-image - 正しい使い方は?

マウスダウンで背景画像を変更する

于 2014-02-16T22:42:41.130 に答える