html - 通过单击切换背景颜色

Question

这看起来应该很容易，但我真的找不到办法去做。

animation http://doir.ir/css.gif

当您单击这些相应的链接时，我需要更改和转换页面的背景颜色。我见过的最接近触发这种类型转换的是:

changing body background color using only html5 and css3用demo

非常接近，但这仅在鼠标悬停在链接上时有效。我已经尝试将 :hover 的伪选择器替换为所有可以想象到的东西，但在您单击链接后没有任何“粘住”。

基本上，我有一个链接列表，当您单击任何链接时，它会播放不同的歌曲(通过 html5 )。我希望背景根据当前正在播放的歌曲进行转换。如有必要，我可以使用 javascript 或 jquery。有什么建议吗？

Answer 1

这个怎么样？ http://jsfiddle.net/u6PPn/2/

关键部分是 jQuery:

$(".color").click(function() {
    var color = $(this).text();
    $("body").animate({ backgroundColor:color},1000);
});

HTML:

<div class="color">Red</div>
<div class="color">Green</div>
<div class="color">Blue</div>

这样你可以设置n种颜色。