Question

我想在链接点击时更改页面的正文，标题，菜单和主要块的背景图像。首先，我正在尝试改变身体背景。我的默认正文背景图像在我的CSS文件中分配：

html, body {
    height:1100px;
}

body {
    width: 100%;
    background-repeat: no-repeat;
    background-size: auto 1150px;
    background-image: url(../Unnamed%20Site%202/ff%20copy7.jpg);
}

我试过这个jQuery函数，但它不起作用。

<!DOCTYPE html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Untitled Document</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Your name" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link href="main.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Electrolize'rel='stylesheet' type='text/css' />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <div class="main">
            <div id="home">
               <div class="menu">
                   <script src="jquery.js"></script>
                   <script>
                   $("#home").click(function() { 
                       $("body").css("backgroundImage", "url(sandpaper.png)");
                   });
                   </script>

     ...Some text into main (box)...
             </div>
         </div>
         ...

Answer 1

文档准备好后设置事件功能：

$(document).ready(function() {
    $('#home').click(function() {
        $('body').css('background-image', "url('sandpaper.png')");
    });
});

Answer 2

您的代码必须是：

$("body").css("background-image", "url('sandpaper.png')");

另外，我建议您使用.addClass() .removeClass()或.toggleClass函数吗？他们提供更清洁的解决方案。

Answer 3

尝试改变：

$("body").css("backgroundImage", "url(sandpaper.png)");

为：

$("body").css("background-image", "url(sandpaper.png)");

Answer 4

就这么简单：

$("body").css("background-image", "url(sandpaper.png)");

或者如果你想按照自己的方式行事：

$("body").css({
   backgroundImage: "url(sandpaper.png)"
});

Answer 5

看起来你需要改变：

$("body").css("backgroundImage", "url(sandpaper.png)");

要：

 $("body").css("background-image", "url(sandpaper.png)");

Answer 6

感谢大家的帮助。我解决了我在 css 文件中创建了BG类：

.bg1 { background: url(sandpaper.png) repeat-x; }

我使用 jquery 脚本：

$(document).ready(function(){ 

        $("#link-home").click( function(){ $
        ("body").addClass("bg1");
    });

更改元素的背景图像点击

6 个答案: