Question

So I have some nav anchors. I want to change some basic color schemes on the page when these are clicked. The only way I’ve been able to do this is with the code below.

It works fine, but I can’t help but think there is a more elegant way. Does anybody know if it’s possible to strip the classes in one foul swoop?

EDIT: This could have been more clear. I didn’t want the original classes gone. Just the classes added with jQuery I guess. Sorry for the confusion.

Thanks.

EDIT: SEE THIS FIDDLE

Tried to implement all solutions.

getting an “{“error”: “Please use POST request”}” though…

EDIT: this was because of href=”?” vs. href=”#” as pointed out.

    $(".home").click(function() {
        $(".primary-color").addClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");           
    });

    $(".services").click(function() {
        $(".primary-color").addClass("two");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");       
    });

    $(".pricing").click(function() {
        $(".primary-color").addClass("three");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two");     
            $(".primary-color").removeClass("four");    
            $(".primary-color").removeClass("five");       
    });

    $(".special-thing").click(function() {
        $(".primary-color").addClass("four");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("five");   
    });

    $(".contact").click(function() {
        $(".primary-color").addClass("five");
            $(".primary-color").removeClass("one");
            $(".primary-color").removeClass("two"); 
            $(".primary-color").removeClass("three");   
            $(".primary-color").removeClass("four");     
    });

Answer 1

You could do it this way

http://jsfiddle.net/lollero/ZUJUB/

$(document).ready(function() {
    $(".home, .services, .pricing, .special-thing, .contact").on("click", function() {

        $(".primary-color")
            // Remove all classes
            .removeClass()
            // Put back .primary-color class + the clicked elements class with the added prefix "pm_".
            .addClass('primary-color pm_' + $(this).attr('class') );       
    });
});​

CSS:

.primary-color {
    width: 100px;
    height: 100px;
    border: 1px solid #e1e1e1;

}


.pm_services { background: red; }
.pm_home { background: green; }
​

HTML:

<div class="services">services</div>
<div class="home">home</div>

<div class="primary-color">Primary-color</div>
​

---

---

or something like this:

http://jsfiddle.net/lollero/ZUJUB/1/

This fitted into the OP’s structure: http://jsfiddle.net/lollero/EXq83/5/

jQuery:

$(document).ready(function() {
    $("#buttons > div").on("click", function() {

        $(".primary-color")
            // Remove all classes
            .removeClass()
            // Put back .primary-color class + the clicked elements index with the added prefix "pm_".
            .addClass('primary-color pm_' + ( $(this).index() + 1 ) );       
    });
});​

CSS:

.primary-color {
    width: 100px;
    height: 100px;
    border: 1px solid #e1e1e1;

}


.pm_1 { background: red; }
.pm_2 { background: green; }
​

HTML:

<div id="buttons">
    <div class="services">services</div>
    <div class="home">home</div>
</div>

<div class="primary-color">Primary-color</div>
​