Question

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

Answer 1

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');
});