图像选项卡jquery onclick和mouseout功能

时间:2011-11-29 09:38:11

标签: jquery html image

我正在处理图片标签,而不是<ul><li>标签,

有图片a.pnga-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代码

$(".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被移出。 我们如何实现这个,悬停,活动和我使用正则表达式来避免鼠标悬停在点击的图像上。

1 个答案:

答案 0 :(得分:0)

我不太清楚你想要什么,但试试这种方式而不是正则表达式:

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

所以,这是正确的吗? :

  • state1 OR state3&gt; mouseover&gt; state2
  • state2&gt; mouseout&gt; state1
  • state3&gt; mouseout&gt; state2
  • state2&gt;点击&gt; state3
  • state3&gt;点击&gt; STATE2