6

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

它工作正常，但我不禁认为有一种更优雅的方式。有人知道是否有可能一举取消课程吗？

编辑：这本来可以更清楚。我不希望原来的课程消失。我猜只是用 jQuery 添加的类。对困惑感到抱歉。

谢谢。

编辑：看到这个小提琴

试图实施所有解决方案。

得到一个 "{"error": "Please use POST request"}" 虽然......

编辑：这是因为 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");     
    });
4

9 回答 9

10

你可以这样做

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>
​
于 2012-12-11T09:25:32.847 回答
6

你可以使用 attr 方法，

$(".xxx").attr("class","newclass");
于 2012-12-11T08:58:23.650 回答
6

只是$(".primary-color").removeClass()（不指定类）应该可以工作！

或者，如果您只需要剥离类（留下其他重要的类），您可以将其分组为 1 个调用，用空格分隔类：

$(".primary-color").removeClass("two three four five");
于 2012-12-11T08:58:41.903 回答
4

您可以使用removeClass()不带参数来删除所有类，
请参阅：http ://api.jquery.com/removeClass/

$(".primary-color").removeClass();

或使用空格分隔的符号来删除您指定的类：

$(".primary-color").removeClass('one two');

或通过以下方式设置全新的类属性attr()：

$(".primary-color").attr('class','one two');
于 2012-12-11T09:00:54.353 回答
4

这应该有效：

$(".home").click(function() {
   $(".primary-color").removeClass().addClass("one");          
});
于 2012-12-11T09:13:58.650 回答
2

您可以通过执行从元素中删除所有类

$("#item").removeClass();

不带参数调用 removeClass 将删除所有项目的类。

在你做之前做这件事addClass，你的代码会减少

于 2012-12-11T08:59:29.100 回答
0

我相信这就是你要找的。您应该简单地设置类属性，而不是加减法。当然，如果有要保留的类，您也可以设置它们，但如果这不合适，您可能应该考虑完全以另一种方式进行。

$(".home").click(function() {
    $(".primary-color").attr("class", "one");
});
于 2012-12-11T08:59:23.480 回答
0

可以应用很多收缩。在不知道代码细节的情况下，很难进行任何进一步的更改。

$(".home, .contact, .special-thing, .pricing, .services").click(function() {
  $(".primary-color")
    .addClass("one")
    .removeClass("two three four five");          
});
于 2012-12-11T09:03:38.100 回答
0

8年后...

我想我会使用数据属性 - 然后将其切换出来，而不是添加和删除类。

<body data-theme='punk'>或者其他的东西。

https://codepen.io/sheriffderek/pen/34c8b5540b34c8ee9aedec604bbd5f59 & 你也可以使用浏览器 localStorage 来保存选择:)

// I'd use body... but for this
var context = document.querySelector('main');

function setTheme(name) {
  context.dataset.theme = name;
}

setTheme('default');


// https://gomakethings.com/why-is-javascript-event-delegation-better-than-attaching-events-to-each-element/
document.addEventListener('click', function(event) {
  
  setTheme(event.target.dataset.themeOption);
  
});
main[data-theme='default'] {
  background-color: lightgray;
}

main[data-theme='punk'] {
  background-color: #FF0066;
}

main[data-theme='corperate'] {
  background-color: white;
  color: purple;
}
<main data-theme='default'>

  <button data-theme-option='default'>Default</button>
  <button data-theme-option='punk'>Punk</button>
  <button data-theme-option='corperate'>Corperate</button>

  <h1>Theme changer thingy</h1>

</main>

于 2021-01-07T17:56:19.167 回答