Вкладка изображения jquery onclick и функция mouseout

Question

Я работаю только с вкладками изображений, а не с вкладками <ul><li>,

Есть изображения a.png и a-h.png, -h представляет изображение при наведении.У нас есть 3 изображения рядом, выступающие в качестве вкладок.Но я пользуюсь mouseout функцией, функция щелчка отключается, т. Е. Исчезает зависание активных вкладок.

ниже - HTML-код

<div class="container">
    <div class="TabMenu">
        <span><img src="images/a.png"></span>
        <span><img src="images/b.png"></span>
        <span><img src="images/c.png"></span>
    </div>
</div>

А ниже - JQuery Code

$(".container .TabMenu span").mouseover(function(){
var myRegExp = /-h./;
var myRegExp2 = /-h-h./;
var str1 = $('img', this).attr('src');
var match = str1.search(myRegExp);
var match2 = str1.search(myRegExp2);

if(match == -1 ){
    var newSrc = $('img', this).attr('src').replace(".", "-h.");
    $('img', this).attr("src", newSrc);
}
else if(match2 == -1){
    var newSrc = $('img', this).attr('src').replace("-h-h.","-h.");
    $('img', this).attr("src", newSrc);
}
});

$(".container .TabMenu span").mouseout(function(){
var myRegExp = /-h./;
var myRegExp2 = /-h-h./;
var str1 = $('img', this).attr('src');
var match = str1.search(myRegExp);
var match2 = str1.search(myRegExp2);

if(match != -1){
    var newSrc = $('img', this).attr('src').replace("-h.", ".");
    $('img', this).attr("src", newSrc);
}
else if(match2 != -1){
    var newSrc = $('img', this).attr('src').replace("-h-h.", "-h.");
    $('img', this).attr("src", newSrc);
}
}); 

$(".container .TabMenu span").click(function(){
var myRegExp2 = /-h./;
var newSrc = $('img', this).attr('src').replace("-h-h.", "-h.");
$('img', this).attr("src", newSrc);
});

$(".container .TabMenu span").click(function(){
var myRegExp2 = /-h./;
var newSrc = $('img', this).attr('src').replace("-h-h.", "-h.");
$('img', this).attr("src", newSrc);
});

});

Когда я наведите курсор мыши на изображение, на которое щелкнули, затем выйдите из изображения, на которое щелкнули, активная стадия, т. Е. -h изображения, будет перемещена. Как мы можем реализовать это, наведите курсор мыши, активно и я использовалвыражения регулярных выражений, чтобы избежать наведения мыши на изображение, на которое нажали.

Answer 1

Я не очень хорошо понимаю, что вы хотите, но попробуйте таким образом вместо регулярного выражения:

<div class="container">
    <div class="TabMenu">
        <span><img class="state1" src="images/a.png"><img class="state2" style="display:none;" src="images/a-h.png"><img class="state3" style="display:none;" src="images/a-h-h.png"></span>
        <span><img class="state1" src="images/b.png"><img class="state2" style="display:none;" src="images/b-h.png"><img class="state3" style="display:none;" src="images/b-h-h.png"></span>
        <span><img class="state1" src="images/c.png"><img class="state2" style="display:none;" src="images/c-h.png"><img class="state3" style="display:none;" src="images/c-h-h.png"></span>
    </div>
</div>

И JQuery:

$(".container .TabMenu span").live("mouseover", function(){
    $(this).find("img").hide();
    $(this).find("img.state2").show();
});


$(".container .TabMenu span").live("mouseout", function(){ 
    if($(this).find("img:visible").hasClass("state2")){
        $(this).find("img").hide();
        $(this).find("img.state1").show();
    }
    else if($(this).find("img:visible").hasClass("state3")){
        $(this).find("img").hide();
        $(this).find("img.state2").show();
    }
});

$(".container .TabMenu span").live("click", function(){ 
    if($(this).find("img:visible").hasClass("state2")){
        $(this).find("img").hide();
        $(this).find("img.state3").show();
    }
    else if($(this).find("img:visible").hasClass("state3")){
        $(this).find("img").hide();
        $(this).find("img.state2").show();
    }
});

Так это правильно? :

• состояние1 ИЛИ состояние3> наведение мыши> состояние2
• state2> mouseout> state1
• state3> mouseout> state2
• state2> click> state3
• state3> нажмите> state2