Javascript change class onclick

Question

Im just trying to get to grips with javascript / ajax / jQuery so Im building a ticket system for my website.

Anyway, I have a table at the top of the page;

    <table align="center" class="thinline" width="600" border="1" cellpadding="2" bordercolor="black">
    <tr class="subtopic" style="font-size: 15px;">
        <td><a onClick="javascript: ShowNewTickets()">New Tickets</a></td>
        <td><a onClick="javascript: ShowYourTickets()">Your Tickets</a></td>
        <td><a onClick="javascript: ShowPuplicTickets()">Public Tickets</a></td>
    </tr>
</table>

When the page loads I want "New Tickets" to have the class "selected". If they hover the mouse over any of the unselected menus then it has a highlighted effect. Once they click onto another link the "selected" class will be removed from the other TD and added to the new TD.

I have tryed onmouseover and onmouseout to do the highlight effect but it messes up when it comes to the link which is already highlighted.

I have also tryed,

    $('.off').live('mouseenter', function() {
    if ($(this).hasClass('selected') == false) {
        $(this).removeClass('off').addClass('highlighted');
    }
});

But that then keeps the TD highlighted.

Thanks for reading.

You could create a color change on hover with CSS only. Also, your question does not seem to fit the title. Anyways: Whenever you leave an element, you have to remove the class highlighted. — Felix Kling
– Felix Kling, Commented Mar 13, 2012 at 17:07
Yeah, it would be better solved with CSS, considering the fact that you are using a elements. The :hover selector will work on all browsers (even IE6). — Shef
– Shef, Commented Mar 13, 2012 at 17:09
Ahh thank you, I can use the javascript to remove the element aswell to stop the hightlight happening to the already hightlighed link? — Bradley Roberts
– Bradley Roberts, Commented Mar 13, 2012 at 17:17
@BradleyRoberts If you don't want the highlighting effect to be applied to the selected element, then try this. — Shef
– Shef, Commented Mar 13, 2012 at 17:22

Bram · Accepted Answer · 2012-03-13 17:24:56Z

2

As Sergio Tulentsev mentioned, you should use the :hover pseudo class to handle the highlight effect. To handle the "selected" class, you could do something like this:

$('.subtopic').on('click', 'a', function(e) {
    $('.subtopic a').removeClass('selected'); // remove the class from all the links
    $(this).addClass('selected'); // add it to the clicked link
}

Note that I am using the new jquery function .on() instead of .click, .live or .delegate. The way .on() works, you will make sure you only bind events to the links in the .subtopic row. Using .on() also guarantees your events will still fire when adding new links dynamically to the DOM.

edited Mar 13, 2012 at 17:24

answered Mar 13, 2012 at 17:23

Bram

1,1121 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bradley Roberts Over a year ago

Thank you for this reply. I will have a attempt at this now!

Bram Over a year ago

@BradleyRoberts Hm, I just saw that I might be using the wrong class names. I see you're using highlighted and off as well, so you might need to switch class names around. jQuery code is mostly pretty readable, so I hope my example will suffice.

Bradley Roberts Over a year ago

I have changed it a little. The css isnt anything set in stone Im just trying to get everything looking nice first :P I changed the a into td as the a even with padding wasnt filling the area needed.

Sergio Tulentsev · Accepted Answer · 2012-03-13 17:09:29Z

2

You should use :hover pseudo-class.

It will handle mouse over/out for you.

answered Mar 13, 2012 at 17:09

Sergio Tulentsev

231k43 gold badges381 silver badges373 bronze badges

Comments

CBusBus · Accepted Answer · 2012-03-13 17:12:21Z

1

Check out.toggleClass(), it does what the name suggests.

answered Mar 13, 2012 at 17:12

CBusBus

2,3672 gold badges18 silver badges28 bronze badges

1 Comment

Bradley Roberts Over a year ago

ah yeah this looks like it will do the job :)! Thank you.

Collectives™ on Stack Overflow

Javascript change class onclick

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related