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 回答