更改活動圖像<li>

Question

我的網站的移動部分有一個2個標簽的內容滑塊。 用戶單擊<li>元素內的鏈接圖像，然后加載相應的內容。 我希望圖像處於“活動”狀態時改變顏色，因此，當用戶單擊圖像時，幾乎要加載新圖像。

這僅適用於移動網站，因此在提供解決方案時請記住這一點。 謝謝大家！

<div id="tabs" class='tabs no-screen no-ie'>
<ul>
    <li>
        <a href="#tab-1"><img src="img/mobile/bingo.png" width="70" height="70" alt="Super Free Bingo" /></a>
    </li>
    <li>
        <a href="#tab-2"><img src="img/mobile/slots.png" width="70" height="70" alt="Super Free Logo" /></a>
    </li>
</ul>
  <div id='tab-1' class="tab-box">
    <?php include 'includes/sfb.php'; ?>
  </div>
  <div id='tab-2' class="tab-box">
    <?php include 'includes/sfsg.php'; ?>
  </div>
</div>

Answer 1

如果我正確理解，當用戶單擊圖像時，圖像會發生變化。 鑒於您只有兩張圖片，我們可以執行以下操作：

為您的目標圖片添加唯一的ID。

<img src="img/mobile/bingo.png" id="image-1">
<img src="img/mobile/slots.png" id="image-2">

為每個圖像添加一個JavaScript OnClick事件，該事件還將重置另一個圖像。

$('#image-1').click(function() {
    $(this).attr('src', 'img/mobile/newImage1.png');
    $(this).parent().parent().css('background-color', 'white');
    $('#image-2').attr('src', 'img/mobile/slots.png');
    $('#image-2').parent().parent().css('background-color', 'orange');
});

$('#image-2').click(function() {
    $(this).attr('src', 'img/mobile/newImage2.png');
    $(this).parent().parent().css('background-color', 'white');
    $('#image-1').attr('src', 'img/mobile/bingo.png');
    $('#image-1').parent().parent().css('background-color', 'orange');
});

Answer 2

查看此演示以供參考

演示

$(".a").click(function(){
$(".a").each(function(index){
   $("#id"+(index+1)+" a img").attr('src',a[index]); 
});
var x=$(this).attr('id');
var y=x.split('id')[1];
$("#id"+(y)+" a img").attr('src',b[y-1]); 
});