0

だからここに私の質問があります：

3つのボタンがあるページがあるとしましょう。それぞれが背景としてユニークなパターンを含んでいます。ボタンの1つをクリック/ホバーした後、ページの背景画像全体を変更したい。

必要なのはhttp://subtlepatterns.com/に似たもの です。別のボタンを選択したときに背景画像が再び変わる限り、プレビューの停止オプションは必要ありません。

どうやってやるの？

また、それが不可能な場合は、これも機能します。ボタンの1つをクリック/ホバーするたびに、（ページの背景全体ではなく）DIVの色を変更します。

4

3 に答える 3

2

ur CSS シートに 3 つの異なる body クラスがあります。

body.class1 {
background: ...;
}

body.class2 {
background: ...;
}

body.class3 {
background: ...;
}

jQuery を使用してボディ クラスを動的に変更する

$("#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>
于 2013-01-23T14:31:48.740 に答える
2

JavaScriptだけを使用すると、次のようなことができます

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

http://jsfiddle.net/62SXu/

これを変更して、画像が何であれパスを渡すこともできます

于 2013-01-23T14:35:18.887 に答える
1

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>
于 2013-01-23T14:37:06.483 に答える