我目前正在使用以下jQuery代码来进行img悬停并单击。问题是,我希望menuleft_off img作为menuleft_on img加载而不会阻止jQuery代码工作。
所以换句话说,我希望在页面上加载menuleft img,就像我已经点击它一样。
我已将“images / menuleft_off.png”更改为“images / menuleft_on.png”。现在当我点击“images / menuright_off.png”更改标签时,“images / menuleft_on.png”保持为_on并且不会改变,直到我将鼠标悬停在它上面。关于如何在点击“images / menuright_off.png”标签/图片时将“images / menuleft_on.png”更改为“images / menuleft_off.png”的任何提示??
HTML:
<div id="toptabs" class="maintabs">
<ul>
<li><a href="#" rel="tcontent1" class="selected"><img src="images/menuleft_off.png" width="277" height="42" class="img-swap" /></a></li>
<li><a href="#" rel="tcontent2"><img src="images/menuright_off.png" width="277" height="42" class="img-swap" /></a></li>
</ul>
</div>
的jQuery
jQuery(function(){
$(".img-swap:not(.active)").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){
if(!$(this).hasClass('active')){
this.src = this.src.replace("_on","_off");
}
});
$(".img-swap").click(function(){
$(".img-swap.active").each(function(){
this.src = this.src.replace("_on","_off");
$(this).removeClass('active');
});
$(this).toggleClass('active');
});
});