Change Image on Active <li>
-
02-01-2020 - |
Vra
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>
Oplossing
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');
});
Ander wenke
Check This Demo for reference
$(".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]);
});
Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow