图像选项卡 jquery onclick 和 mouseout 函数

Question

我只处理图像选项卡，而不是

• 选项卡，

有图像 a.png 和 ah.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 代码

$(".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
• 状态2>鼠标移出>状态1
• 状态3>鼠标移出>状态2
• 状态2>点击>状态3
• 状态3>点击>状态2