jQuery添加类并删除所有其他类

Question

所以我有一些导航锚.我想在点击它们时更改页面上的一些基本配色方案.我能够做到这一点的唯一方法是使用下面的代码.

它工作正常,但我不禁认为有一种更优雅的方式.有人知道是否有可能在一次犯规中脱掉这些课程？

编辑:这可能更清楚了.我不希望原来的课程消失了.我想,只是添加了jQuery的类.对困惑感到抱歉.

谢谢.

编辑:看到这个骗局

试图实施所有解决方案.

得到"{"错误":"请使用POST请求"}"虽然......

编辑:这是因为href ="？" 与指出的href ="#"相对应.

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

只是$(".primary-color").removeClass()(没有指定类)应该工作!

或者,如果您只需要剥离类(留下其他重要类),您可以将其分组为1个调用,用空格分隔类:

$(".primary-color").removeClass("two three four five");   

Answer 2

你可以这样做

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>
?

或类似的东西:

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

这符合OP的结构: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>
?

Answer 3

你可以使用attr方法,

$(".xxx").attr("class","newclass");