0

我有三个“标签”，我使用的图像如下：-

在此处输入图像描述

对于每个选项卡，有三个图像：-

  • bookaccount.png （默认 - 橙色）
  • bookaccount-a.png（活动 - 白色）
  • bookaccount-h.png（悬停 - 蓝色）

bookcash.png 和 bookguest.png 也是如此。

默认情况下，我希望“来宾”保留为活动选项卡，而其他选项卡为橙色，这就是我所拥有的：

<div id="main-online-user">

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Guest" id="img-onlinebooking-guest" class="left" src="images/bookguest-a.png" /></a>

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"><img alt="One 2 One Account" id="img-onlinebooking-acc" class="left" src="images/bookaccount.png" /></a>

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

</div>

对于悬停事件，我现在这样做：-

    $("#img-onlinebooking-guest").hover(function() { 
         $(this).attr("src", "images/bookguest-h.png");
    });

    $("#img-onlinebooking-guest").mouseleave(function() { 
         $(this).attr("src", "images/bookguest.png");
    });

问题是（假设访客处于活动状态 - 白色），并且我将鼠标悬停在它上面，当我离开该元素时，当它仍然是活动选项卡时，它会将图像更改回橙色（默认）。

我想要做的是： -

如果图像是一个活动元素，那么当您将鼠标悬停在它上面时，什么也不会发生。（这可能是更好的选择）

或者，如果活动元素悬停，则在 mouseout 时，它会恢复为 mouseenter 事件之前的颜色。

我不确定我该怎么做，所以我将不胜感激！

（我知道我可以使用 jQuery 选项卡，但客户想要这些图像，所以我别无选择）

编辑：：

我已将“活动”类添加到#img-onlinebooking-guest 并将 jQuery 更改为：-

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

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

    });

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

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

    });

    $("#img-onlinebooking-cash").click(function() { 
         $(this).addClass('active');
         $('#img-onlinebooking-guest, #img-onlinebooking-acc').removeClass('active');
         $(this).attr("src", "images/bookcash-a.png");
         $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");
         $('#img-onlinebooking-acc').attr("src", "images/bookaccount.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");

    });

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

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

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

    });

它看起来很乱，但无论如何，它适用于“访客”选项卡，我在 HTML 中添加了“活动”类，但不适用于其他选项卡。如果我单击“现金”，它会使图像处于活动状态（白色），但在鼠标移出时，当它应该保持白色时，它仍然会将颜色更改回橙色（默认），因为我已在单击时将“活动”类添加到此元素。

有任何想法吗？

你可以在这里看到这个；关联

4

3 回答 3

2

你可以这样做：

单击图像设置一个名为的类，让我们说active

$("#img-onlinebooking-guest").click(function () {
    $(this).addClass('active');
});

然后如果它不是活动链接，我们可以做悬停逻辑

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

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

function () {
    $(this).attr("src", "images/bookguest.png");
});
于 2013-04-01T10:28:07.467 回答
0

我想建议您.active在单击时为图像添加一个新的类名。

然后你可以使用这个脚本.not() or :not()：

$('[id^="img-onlinebooking"]').not('.active').hover(function() { 
     $(this).attr("src", "images/bookguest-h.png");
});

$('[id^="img-onlinebooking"]').not('.active').mouseleave(function() { 
     $(this).attr("src", "images/bookguest.png");
});
于 2013-04-01T10:08:20.277 回答
0

hover()这是因为在更改或mouseleave()事件处理程序中的选项卡图像之前，您没有设置/检查任何标志。你可以这样做

$("#img-onlinebooking-guest").hover(function() {
         var pathname = window.location.pathname;
         if(pathname.indexOf("/login-guest.php")<0)
         {
           //guest is not active
           $(this).attr("src", "images/bookguest-h.png");
         }
    });

    $("#img-onlinebooking-guest").mouseleave(function() {
         var pathname = window.location.pathname;
         if(pathname.indexOf("/login-guest.php")<0)
         { 
           //guest is not active
           $(this).attr("src", "images/bookguest.png");
         }
    });
于 2013-04-01T10:12:35.850 回答