jQuery addClass not working as expected

Question

I have two images where on click I am adding a class called 'active' using addClass and changing the images to an active state colour:-

    $("#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");

    });

On the hover event I am changing the image to a 'hover' image and checking if the class is 'active'.

    $('#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");

    });

Basically, how I am wanting to work is that, when you click an image it changes to the active image and on hover it changes to hover image. At the same time, if the image is active I don't want the hover state do anything.

This is nearly working as you can see here.

The only problem is that when I click one of the other tabs, it changes the clicked item to 'active' as expected, but on mouseout it is reverting it back to default colour when it should stay as the active colour.

Any ideas how I can fix this? (hope I've explained this okay).

Answer 1

Ideally you should use CSS for most of this as that's what it was built for. Turns out much cleaner, no handling of hover events.

HTML

Change images to divs

<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

Target all elements not the current one and remove class, then add to current.

$("#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

Active and hover styles are the same so there are no issues with accidentally removing it.

#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);
}

Answer 2

Your problem is the events are set before your active class is set, so the events are already there do this

$('#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");
            }

    });

In short, Dont do anything if the Object has the 'active' class, So technically your problems is not with the Click Event, even though it may seem so in the UI

Answer 3

Try like this

 $("#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");

});

first you need to remove active class from other and then you can assign to your particular