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

1

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

answered Mar 22, 2012 at 17:08

user1164109

891 silver badge8 bronze badges

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

Comments

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

0

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

Should that not be:

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

answered Mar 21, 2012 at 18:47

RTulley

1754 bronze badges

Comments

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

0

$('.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.

edited Mar 21, 2012 at 19:31

answered Mar 21, 2012 at 19:21

The Alpha

147k30 gold badges294 silver badges313 bronze badges

1 Comment

user1164109 Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related