圖像選項卡的jQuery的onclick及移出功能

我的工作只圖像標籤不<ul><li>標籤，圖像選項卡的jQuery的onclick及移出功能

有圖像，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代碼

$(".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的圖像被移出.. 我們如何實現這一點，懸停，活躍，我用正則表達式來避免點擊圖像上懸停鼠標。

來源

2011-11-29 Rafee

我在尋找這個圖片的東西！ – uzair

想知道，爲什麼不使用'$（'a'）。hover（function（）'？ –

我不很瞭解你想要什麼，但通過這種方式，而不是正則表達式的嘗試：

<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

來源

2011-11-29 10:40:43 TeChn4K

圖像選項卡的jQuery的onclick及移出功能

回答

相關問題