0

フォーラムでこれを検索しようとしましたが、すべての結果は常に div タグまたはそのようなものと関係があります。私自身の問題に関連するものは何もないようです。

リンクをクリックすると、ページの背景画像を新しい画像に変更するだけでした。

背景画像への現在のcssは次のとおりです...

body { 
    background:#000000 url(../img/wood01.jpg) no-repeat fixed center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

そして、現在リスト用にフォーマットされているリンクを使用したいだけです...

<li>
    <font color="#FFFFFF">Change Background</font> 
        <ul class="dropup">
            <li><a href="#" id="bgimg01">Link 1</a></li>
            <li><a href="#" id="bgimg02">Link 2</a></li>
            <li><a href="#" id="bgimg03">Link 3</a></li>
        </ul>
</li>

また、リンクがクリックされたときにページを更新したくありません。背景を動的に変更する必要があります。

4

2 に答える 2

0

jsソリューションは、

http://jsfiddle.net/NmFru/

HTML

<li>
    <font color="#FFFFFF">Change Background</font> 
        <ul class="dropup">
            <li><a href="#" id="140x101" onclick="changeImage(this.id)">Link 1</a></li>
            <li><a href="#" id="140x102" onclick="changeImage(this.id)">Link 2</a></li>
            <li><a href="#" id="140x103" onclick="changeImage(this.id)">Link 3</a></li>
        </ul>
</li>

JS

function changeImage(img){

    document.body.style.backgroundImage = 'url(http://placehold.it/'+img+')';

}
于 2013-11-04T14:54:11.130 に答える
0

jQuery を使用します。

$('#bgimg01').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
$('#bgimg02').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/hh3476)');
})
$('#bgimg03').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/gg0000)');
})

デモ: http://jsfiddle.net/LPUgF/158/

于 2013-11-04T14:48:47.827 に答える