单击按钮时更改整个页面背景 [英] change the entire page background when I click on a button

问题描述

这是我的问题:

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

lets say I have a page with 3 buttons. each contains a unique pattern as as background. I want to change the entire page background image once I click/ hover on one of the buttons.

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

what I need is something similar to http://subtlepatterns.com/ I dont need a stop preview option, as long as the background image change again when I select a different button.

我该怎么做?

如果不可能的话，这也对我有用:每当我单击/将鼠标悬停在一个按钮上时，更改DIV的颜色(而不是整个页面背景).

also, if its not possible, this will also work for me: change the color of a DIV (instead of the entire page background) whenever I click/ hover on one of the buttons.

推荐答案

在您的CSS工作表中有3种不同的主体类:

have 3 different body class in ur CSS sheet:

body.class1 {
background: ...;
}

body.class2 {
background: ...;
}

body.class3 {
background: ...;
}

使用jQuery动态更改主体类

use jQuery to dynamic change body class

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

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

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

然后最后在jQuery的每个按钮中放置一个id，以在DOM中找到它:

then finally put a id in each button to jQuery find this in DOM:

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

这篇关于单击按钮时更改整个页面背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！