我有两个图像,单击时我正在使用 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");
});
基本上,我想要的工作方式是,当您单击图像时,它会变为活动图像,而在悬停时,它会变为悬停图像。同时,如果图像处于活动状态,我不希望悬停状态做任何事情。
正如您在此处看到的那样,这几乎可以正常工作。
唯一的问题是,当我单击其他选项卡之一时,它会按预期将单击的项目更改为“活动”,但是在鼠标移出时,它会在应保持为活动颜色时将其恢复为默认颜色。
有什么想法可以解决这个问题吗?(希望我已经解释过了)。