Я хочу изменить фоновые изображения тела, заголовка, меню и основных блоков моей страницы при нажатии ссылки. Во-первых, я пытаюсь изменить только фон тела. Мое фоновое изображение тела по умолчанию назначено в моем файле 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>
...
Ваш код должен быть:
$("body").css("background-image", "url('sandpaper.png')");
Кроме того, могу ли я предложить вместо этого использовать функции .addClass()
.removeClass()
или .toggleClass
? Они предлагают более чистое решение.
Задайте функцию события после готовности документа:
$(document).ready(function() {
$('#home').click(function() {
$('body').css('background-image', "url('sandpaper.png')");
});
});
<script>
либо в <head>
либо в нижней части HTML-кода.
Спасибо всем за помощь. Я решил это. Я создал в своем CSS- файле CSS- файл:
.bg1 { background: url(sandpaper.png) repeat-x; }
И я использовал сценарий jquery:
$(document).ready(function(){
$("#link-home").click( function(){ $
("body").addClass("bg1");
});
Попробуйте изменить:
$("body").css("backgroundImage", "url(sandpaper.png)");
чтобы:
$("body").css("background-image", "url(sandpaper.png)");
Похоже, вам нужно будет изменить:
$("body").css("backgroundImage", "url(sandpaper.png)");
Для того, чтобы:
$("body").css("background-image", "url(sandpaper.png)");
Так просто:
$("body").css("background-image", "url(sandpaper.png)");
Или если вы хотите сделать свой путь:
$("body").css({
backgroundImage: "url(sandpaper.png)"
});
$("body").css("background-image", "url(sandpaper.png)");