jQuery Toggle between tab images
<p>I'm struggling with a simple toggle. Well, it should be simple. I'm visiting forums and threads and can't quite get it to work.</p>

<p>I have three tab images (not part of any package) and I simply want the clicked image to switch to "on" and others to switch to "off"</p>

<pre><code>&lt;img class="mastheadTab" id="products" src="#application.viewImageDIR#/tab_products_on.gif" width="119" height="31" hspace="4"&gt;

&lt;img class="mastheadTab" id="suppliers" src="#application.viewImageDIR#/tab_suppliers_off.gif" width="117" height="31" hspace="4"&gt;

&lt;img class="mastheadTab" id="buyers" src="#application.viewImageDIR#/tab_buyers_off.gif" width="117" height="31" hspace="4"&gt;
</code></pre>

<p>Here is my slack Jquery, which is in need of fixing.
Somehow, I need to reinitialise the tabs, because the clicks are crossing over each other and displaying the wrong image in the wrong position and not switching states till after the second or third click.</p>

<pre><code>$(".mastheadTab").live("click", function(e) {
 var tab = $(this).attr("id")

 $('.mastheadTab').toggle(
  function(){$(this).attr("src", "/chinabuy-new/images/website/tab_" + tab + "_on.gif"); },
  function(){$(this).attr("src", "/chinabuy-new/images/website/tab_" + tab + "_off.gif"); }
 );
 e.preventDefault();
});
</code></pre>
