jQuery - Add and Remove class

Question

The situation is that I have two buttons that each have a dedicated class. But when I click the about button I want the class to change to the highlightabout class, and then when I click the graph button I want the highlightabout class to revert to the about class and the graph class to change to the highlightgraph class. So they would switch accordingly when I click either button.

I have this script but I don't understand why it isn't working:

HTML:

<div id="wrapper"> <ul><li><a class="about"><span>About</span></a></li> <li><a class="graph"><span>Graphic Design</span></a></li> </ul>

.CSS:

.about { background:url(../button/about_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer} .graph { background:url(../button/graph_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer} .highlightabout {background:url(../button/about_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer} .highlightgraph {background:url(../button/graph_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer}

Script:

$('.about').click(function() { $(this).removeClass("about").addClass("highlightabout"); $('.graph').removeClass("highlightgraph").addClass("graph"); }); $('.graph').click(function() { $(this).removeClass("graph").addClass("highlightgraph"); $('.about').removeClass("highlightabout").addClass("about"); });

Appreciate any help.

UPDATE: Extremely sorry for not adding the HTML, I didn't think it would help. Added the HTML/.CSS now also.

You should provide more information - errors, html, what exactly is not working... — ventsislaf
– ventsislaf, Commented Mar 21, 2012 at 18:44
Code given above doesn't tell anything about the error, please provide more information! — The Alpha
– The Alpha, Commented Mar 21, 2012 at 18:46
Works for me (or at least does what I expect it to do): jsfiddle.net/zWJTG — David
– David, Commented Mar 21, 2012 at 18:48
It's working, class is being added to the a tag. Just click 'About' here jsfiddle.net/4qYtJ — The Alpha
– The Alpha, Commented Mar 21, 2012 at 19:13
Thank you for the responses but I added more updates to what I actually wanted to achieve, sorry that I didn't do this in the first but I actually thought it would have complicated matters. — user1164109
– user1164109, Commented Mar 21, 2012 at 19:16

user1164109 · Accepted Answer · 2012-03-22 17:08:18Z

I have found the solution:

<div id="wrapper"> <ul><li><a id="about_button" class="about"><span>About</span></a></li> <li><a id="graph_button" class="graph"><span>Graphic Design</span></a></li> </ul>

Instead of using the class I added an ID for the anchor tag. Thus the script looks like this:

$('#about_button').click(function() { $(this).removeClass("about").addClass("highlightabout"); $('#graph_button').removeClass("highlightgraph").addClass("graph"); }); $('#graph_button').click(function() { $(this).removeClass("graph").addClass("highlightgraph"); $('#about_button').removeClass("highlightabout").addClass("about"); });

jsfiddle

RTulley · Accepted Answer · 2012-03-21 18:47:27Z

$('.graph').removeClass("highlightgraph").addClass("graph");

Should that not be:

$('.graph').removeClass("graph").addClass("highlightgraph");

The Alpha · Accepted Answer · 2012-03-21 19:31:32Z

$('.about').click(function() { $(this).removeClass("about").addClass("highlightabout"); $('.graph').removeClass("graph").addClass("highlightgraph"); }); $('.graph').click(function(e) { $('.highlightabout').removeClass("highlightabout").addClass("about"); $(this).removeClass("highlightgraph").addClass("graph"); });

Try this fiddle.

Not entirely the effect I wanted, but maybe that was because I didn't explain my situation properly. Anyway I posted the answer, thank you for your help.

Collectives™ on Stack Overflow

jQuery - Add and Remove class

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related