jQuery Переключить между изображениями вкладки

Question

Я борюсь с простым переключением. Ну, это должно быть просто. Я посещаю форумы и темы и не могу заставить его работать.

У меня есть три вкладки изображения (не является частью какого-либо пакета), и я просто хочу, чтобы щелкнуть мышью изображение, чтобы перейти к «на» и другие, чтобы переключиться на «выкл»

<img class="mastheadTab" id="products" src="#application.viewImageDIR#/tab_products_on.gif" width="119" height="31" hspace="4"> 

<img class="mastheadTab" id="suppliers" src="#application.viewImageDIR#/tab_suppliers_off.gif" width="117" height="31" hspace="4"> 

<img class="mastheadTab" id="buyers" src="#application.viewImageDIR#/tab_buyers_off.gif" width="117" height="31" hspace="4"> 

Вот мой провисание Jquery, который нуждается в фиксации. Как-то мне нужно повторно инициализировать вкладки, потому что клики пересекаются друг с другом и отображают неправильное изображение в неправильном положении, а не переключают состояния до второго или третьего щелчка.

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

Answer 1

Вы можете получить id в момент щелчка, как это:

$(".mastheadTab").click(function(){ 
    //turn the others off 
    $(".mastheadTab").not(this).attr("src", function(i, src) { 
    return src.replace("_on", "_off"); 
    }); 
    //toggle this image's source 
    this.src = this.src.replace(/(_off|_on)/, function(i, m) { 
    return m == "_off" ? "_on" : "_off"; 
    }); 
}); 

В настоящее время вы получаете id для щелкнули изображения и прикрепление нового тумблера набора click обработчиков каждый раз. Вместо этого просто используйте приведенный выше код, чтобы получить изображение id для изображения, на которое вы нажали.