0

我有两个图像，单击时我正在使用 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");

    });

基本上，我想要的工作方式是，当您单击图像时，它会变为活动图像，而在悬停时，它会变为悬停图像。同时，如果图像处于活动状态，我不希望悬停状态做任何事情。

正如您在此处看到的那样，这几乎可以正常工作。

唯一的问题是，当我单击其他选项卡之一时，它会按预期将单击的项目更改为“活动”，但是在鼠标移出时，它会在应保持为活动颜色时将其恢复为默认颜色。

有什么想法可以解决这个问题吗？（希望我已经解释过了）。

4

3 回答 3

2

理想情况下，您应该在大多数情况下使用 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>

JS

定位不是当前元素的所有元素并删除类，然后添加到当前元素。

$("#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-02T08:58:53.823 回答
0

您的问题是在设置活动课程之前设置了事件，因此事件已经存在执行此操作

$('#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-02T08:59:00.520 回答
0

像这样试试

 $("#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-02T08:59:59.137 回答