Change Image on Active <li>

Question

I have a 2-tab content slider for the mobile section of my site. The user clicks on the linked image within the <li> element and the corresponding content loads. I would like the image to change color when in an "active" state, so pretty much a new image to be loaded when the user clicks it.

This is only for mobile sites so please bear that in mind when offering solutions. Thanks All!!

<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

If I understood that correctly, when the user clicks the image, the image changes. Seeing as you only have two images, we can do the following:

Add a unique id to your target images.

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

Add a JavaScript OnClick event for each image that will also reset the other image.

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

Check This Demo for reference

Demo

$(".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]); 
});