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

A js solution is,

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 回答