jQuery的addClass工作不正常

我有两个图像，其中上点击我加入了一个名为“主动”使用addClass类，并改变图像到活跃状态的颜色： -jQuery的addClass工作不正常

$("#img-onlinebooking-guest").click(function() { 

     $(this).addClass('active'); 
     $('#img-onlinebooking-acc').removeClass('active'); 
     $(this).attr("src", "images/bookguest-a.png"); 

    }); 

    $("#img-onlinebooking-acc").click(function() { 

     $(this).addClass('active'); 
     $('#img-onlinebooking-cash').removeClass('active'); 
     $(this).attr("src", "images/bookaccount-a.png"); 

    });

在悬停事件我我将图片改为“悬停”图片，并检查课程是否为“有效”。

$('#img-onlinebooking-guest:not(.active)').hover(

     function() { 
      $(this).attr("src", "images/bookguest-h.png"); 
     }, 

     function() { 
      $(this).attr("src", "images/bookguest.png"); 

    }); 

    $('#img-onlinebooking-acc:not(.active)').hover(

     function() { 
      $(this).attr("src", "images/bookaccount-h.png"); 
     }, 

     function() { 
      $(this).attr("src", "images/bookaccount.png"); 

    });

基本上，我怎么想的工作是，当您单击图像则切换到活动图像和悬停它改变悬停图片。同时，如果图像是活动的，我不希望悬停状态做任何事情。

这几乎可以正常工作，因为您可以看到here。

唯一的问题是，当我点击其他选项卡之一，它改变了单击项目按预期“激活”，但在鼠标移开它恢复回默认的颜色，当它应该保持为活动色。

任何想法如何解决这个问题？（希望我已经解释了这一点）。

来源

2013-04-02 nsilva

理想情况下，您应该在大部分情况下使用CSS，因为这是它的目的。变得更清洁，没有处理悬停事件。

HTML

更改图像的DIV

<div id="main-online-user"> 
    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"> 
     <div alt="One 2 One Guest" id="img-onlinebooking-guest" class="left"></div> 
    </a> 
    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"> 
     <div alt="One 2 One Account" id="img-onlinebooking-acc" class="left active"></div> 
    </a> 
    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"> 
     <div alt="One 2 One Cash" id="img-onlinebooking-cash" class="left"></div> 
    </a> 
</div>

目标的所有元素不是当前和删除类，然后添加到当前。

$("#img-onlinebooking-guest").click(function() { 
    $('#main-online-user a').not(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

$("#img-onlinebooking-acc").click(function() { 
    $('#main-online-user a').not(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

$("#img-onlinebooking-cash").click(function() { 
    $('#main-online-user a').not(this).removeClass('active'); 
    $(this).addClass('active'); 
});

CSS

活动和悬停风格是一样的，所以有与意外删除它没有问题。

#main-online-user img { 
    width:102px; 
    height:42px; 
} 
#img-onlinebooking-acc { 
    background:url(images/bookaccount.png); 
} 
#img-onlinebooking-guest { 
    background:url(images/bookguest.png); 
} 
#img-onlinebooking-cash { 
    background:url(images/bookcash.png); 
} 

#img-onlinebooking-acc.active, 
#img-onlinebooking-acc:hover { 
    background:url(images/bookaccount-a.png); 
} 
#img-onlinebooking-guest.active, 
#img-onlinebooking-guest:hover { 
    background:url(images/bookguest-a.png); 
} 
#img-onlinebooking-cash.active, 
#img-onlinebooking-cash:hover { 
    background:url(images/bookcash-a.png); 
}

来源

2013-04-02 08:58:53

非常感谢，这是更清洁:) – nsilva

你的问题是设置您的活动课前活动设置，因此事件已经在那里做

$('#img-onlinebooking-guest').hover(

     function() { 
      if(!$(this).hasClass("active"){ 
       $(this).attr("src", "images/bookguest-h.png"); 
      } 
     }, 

     function() { 
      if(!$(this).hasClass("active"){ 
       $(this).attr("src", "images/bookguest.png"); 
      } 

    }); 

    $('#img-onlinebooking-acc').hover(

     function() { 
      if(!$(this).hasClass("active"){ 
       $(this).attr("src", "images/bookaccount-h.png"); 
      } 
     }, 

     function() { 
      if(!$(this).hasClass("active"){ 
       $(this).attr("src", "images/bookaccount.png"); 
      } 

    });

总之，不要做任何事情，如果对象具有“主动”类，因此从技术上讲你的问题是不是与Click事件，尽管它可能看起来所以在UI

来源

2013-04-02 08:59:00

尝试这样

$("#img-onlinebooking-guest").click(function() { 

    $('#img-onlinebooking-acc').removeClass('active'); 
    $(this).addClass('active');   
    $(this).attr("src", "images/bookguest-a.png"); 

}); 

$("#img-onlinebooking-acc").click(function() { 

    $('#img-onlinebooking-cash').removeClass('active'); 
    $(this).addClass('active'); 
    $(this).attr("src", "images/bookaccount-a.png"); 

});

首先你需要删除其他活动班，然后你可以分配给你的特定

来源

2013-04-02 08:59:59 Gautam3164

jQuery的addClass工作不正常

回答

相关问题