这是JSFiddle
$(document).ready(function(){
$(".red").click(function(){
$(".red").addClass("selected");
$(".orange").removeClass("selected");
$(".yellow").removeClass("selected");
$(".green").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".pink").removeClass("selected");
$(".brown").removeClass("selected");
$(".black").removeClass("selected");
$(".white").removeClass("selected");
});
$(".orange").click(function(){
$(".orange").addClass("selected");
$(".red").removeClass("selected");
$(".yellow").removeClass("selected");
$(".green").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".pink").removeClass("selected");
$(".brown").removeClass("selected");
$(".black").removeClass("selected");
$(".white").removeClass("selected");
});
$(".yellow").click(function(){
$(".yellow").addClass("selected");
$(".orange").removeClass("selected");
$(".red").removeClass("selected");
$(".green").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".pink").removeClass("selected");
$(".brown").removeClass("selected");
$(".black").removeClass("selected");
$(".white").removeClass("selected");
});
$(".green").click(function(){
$(".green").addClass("selected");
$(".orange").removeClass("selected");
$(".yellow").removeClass("selected");
$(".red").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".pink").removeClass("selected");
$(".brown").removeClass("selected");
$(".black").removeClass("selected");
$(".white").removeClass("selected");
});
$(".lightblue").click(function(){
$(".lightblue").addClass("selected");
$(".orange").removeClass("selected");
$(".yellow").removeClass("selected");
$(".green").removeClass("selected");
$(".red").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".pink").removeClass("selected");
$(".brown").removeClass("selected");
$(".black").removeClass("selected");
$(".white").removeClass("selected");
});
$(".darkblue").click(function(){
$(".darkblue").addClass("selected");
$(".orange").removeClass("selected");
$(".yellow").removeClass("selected");
$(".green").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".red").removeClass("selected");
$(".pink").removeClass("selected");
$(".brown").removeClass("selected");
$(".black").removeClass("selected");
$(".white").removeClass("selected");
});
$(".pink").click(function(){
$(".pink").addClass("selected");
$(".orange").removeClass("selected");
$(".yellow").removeClass("selected");
$(".green").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".red").removeClass("selected");
$(".brown").removeClass("selected");
$(".black").removeClass("selected");
$(".white").removeClass("selected");
});
$(".brown").click(function(){
$(".brown").addClass("selected");
$(".orange").removeClass("selected");
$(".yellow").removeClass("selected");
$(".green").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".pink").removeClass("selected");
$(".red").removeClass("selected");
$(".black").removeClass("selected");
$(".white").removeClass("selected");
});
$(".black").click(function(){
$(".black").addClass("selected");
$(".orange").removeClass("selected");
$(".yellow").removeClass("selected");
$(".green").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".pink").removeClass("selected");
$(".brown").removeClass("selected");
$(".red").removeClass("selected");
$(".white").removeClass("selected");
});
$(".white").click(function(){
$(".white").addClass("selected");
$(".orange").removeClass("selected");
$(".yellow").removeClass("selected");
$(".green").removeClass("selected");
$(".lightblue").removeClass("selected");
$(".darkblue").removeClass("selected");
$(".pink").removeClass("selected");
$(".brown").removeClass("selected");
$(".black").removeClass("selected");
$(".red").removeClass("selected");
});
});
在 JSFiddle 中,它完全正常工作,并且运行平稳。在本地,它的运行速度非常慢,所有 CSS3 转换都运行不稳定。
有人可以向我解释发生了什么。如果您想查看我已将其添加到PasteBin的完整代码。
非常感谢大家的回复!