jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery添加类并删除所有其他类大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我有一些导航锚.我想在点击它们时更改页面上的一些基本配色方案.我能够做到这一点的唯一方法是使用下面的代码.

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

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

谢谢.

编辑:见THIS FIDDLE

试图实施所有解决方案.

得到“{错误“:”请使用POST请求“}”然……

编辑:这是因为href =“?”与指出的href =“#”相对应.

@H_502_25@$(".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"); });

解决方法

你可以这样做

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

@H_502_25@$(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:

@H_502_25@.priMary-color { width: 100px; height: 100px; border: 1px solid #e1e1e1; } .pm_services { BACkground: red; } .pm_home { BACkground: green; } ​

HTML:

@H_502_25@<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的:

@H_502_25@$(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:

@H_502_25@.priMary-color { width: 100px; height: 100px; border: 1px solid #e1e1e1; } .pm_1 { BACkground: red; } .pm_2 { BACkground: green; } ​

HTML:

@H_502_25@<div id="buttons"> <div class="services">services</div> <div class="home">home</div> </div> <div class="priMary-color">PriMary-color</div> ​

大佬总结

以上是大佬教程为你收集整理的jQuery添加类并删除所有其他类全部内容,希望文章能够帮你解决jQuery添加类并删除所有其他类所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。