css - 单击按钮时更改整个页面背景

Question

所以这是我的问题：

假设我有一个带有 3 个按钮的页面。每个都包含一个独特的图案作为背景。单击/悬停在其中一个按钮上后，我想更改整个页面的背景图像。

我需要的是类似于http://subtlepatterns.com/ 我不需要停止预览选项，只要当我选择不同的按钮时背景图像再次发生变化。

我怎样才能做到这一点？

另外，如果不可能，这也对我有用：每当我单击/悬停在其中一个按钮上时，更改 DIV 的颜色（而不是整个页面背景）。

Answer 1

在你的 CSS 表中有 3 个不同的 body 类：

body.class1 {
background: ...;
}

body.class2 {
background: ...;
}

body.class3 {
background: ...;
}

使用jQuery动态改变body类

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('class3');
});

然后最后在每个按钮中放置一个 id 到 jQuery 在 DOM 中找到这个：

<a id="btn1">bg1</a>
<a id="btn2">bg2</a>
<a id="btn3">bg3</a>

Answer 2

只使用 javascript 你可以做这样的事情

function changeBg(color) {
    var color = '#' + color;
    document.body.style.background = color;
}

http://jsfiddle.net/62SXu/

您也可以更改它以将路径传递给您的图像

Answer 3

必须用 CSS 完成吗？使用 jQuery 似乎要容易得多。像这样的东西会起作用：

<style>
.button1 {background:url(url to PIC);}
</style>
$(document).ready(function (){
$(".onClick").click(function (){
var ID = $(this).attr("id");
$(body).removeClass();
$(body).addClass(ID);
})
})
<div class = "onClick" id="button1"> ... </div>
<div class = "onClick" id="button2"> ... </div>
<div class = "onClick" id="button3"> ... </div>