I have the following HTML, and i m trying to accomplish two things. 1. Onload change the first item image to 1-B.png 2. If any of the other links are click ed then change the image to reflect what has been clicked.
<ul class="tabs">
<div class="q1"><a href="#"><img src="/visuals/1-A.png" border="0" alt="" /></a></div>
<div class="q2"><a href="#"><img src="/visuals/2-A.png" border="0" alt="" /></a></div>
<div class="q3"><a href="#"><img src="/visuals/3-A.png" border="0" alt="" /></a></div>
<div class="q4"><a href="#"><img src="/visuals/4-A.png" border="0" alt="" /></a></div>
</ul>
I used the following for the onload but it doesn't change
$('ul.tabs > .q1 > .current > a:first').click(function(e){
$('.q1').attr('src',('/visuals/1-B.png'));
});
Any help would be appreciated
You need to change the image that is inside the <div>
:
$('.q1 img').attr(...)
To "reset" all other images, you can have such code:
$(".tabs div").not(".q1").each(function(index) {
$(this).find("img").attr('src', '/visuals/' + index + '-A.png');
});
try
$(document).ready(function() {
$('.q1 img').attr('src',('/visuals/1-B.png'));
$('.q1 a').click(function(){
$(this).attr('src',(...what u want...));
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With