Изменить фоновое изображение элементов по клику

Question

Изменить фоновое изображение элементов по клику

0

Я хочу изменить фоновые изображения тела, заголовка, меню и основных блоков моей страницы при нажатии ссылки. Во-первых, я пытаюсь изменить только фон тела. Мое фоновое изображение тела по умолчанию назначено в моем файле 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="/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>
         ...

Fakt7 21 март 2014, в 15:45

Источник

1

$("body").css("background-image", "url(sandpaper.png)");
Morpheus 21 март 2014, в 14:02
0

@Morpheus Морфеус: не стесняйтесь поставить его как ответ, потому что это ответ
KarelG 21 март 2014, в 14:03
0

моя вина, спасибо, но это не решает проблему
Fakt7 21 март 2014, в 14:06
0

@Morpheus Морфеус Это не имеет значения для jQuery .
Blazemonger 21 март 2014, в 14:08
0

Вы читали статью, которую вы опубликовали сами?
Morpheus 21 март 2014, в 14:08
0

Вы уверены, что изображение можно найти? Попробуйте использовать URL для изображения, относящегося к корневому каталогу: url(/images/sandpaper.png)
Blazemonger 21 март 2014, в 14:09
0

да, я попробовал это с ("background-color", "# 000000"); , Это работает только тогда, когда я использую $ (document) .ready (function () {, но я должен дважды щелкнуть для изменения фона.
Fakt7 21 март 2014, в 14:49

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

css

background

6 ответов

2

Задайте функцию события после готовности документа:

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

Pim Verlangen 21 март 2014, в 12:15

0

Спасибо с $ (document) .ready (function () {это работает, но я должен нажать на ссылку, чтобы изменить фон. Вы не знаете, как это исправить?
Fakt7 21 март 2014, в 14:19
0

Я не совсем уверен, почему вы должны нажать на нее два раза. Однако я рекомендую объявлять теги <script> либо в <head> либо в нижней части HTML-кода.
Pim Verlangen 21 март 2014, в 14:23
0

Я попробовал это. Я нажимаю на ссылку (фон по-прежнему по умолчанию), и после этого я должен щелкнуть везде на сайте, чтобы изменить фон.
Fakt7 21 март 2014, в 14:40

Показать ещё 1 комментарий

0

Спасибо всем за помощь. Я решил это. Я создал в своем CSS- файле CSS- файл:

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

И я использовал сценарий jquery:

$(document).ready(function(){ 

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

Fakt7 21 март 2014, в 13:22

0

Попробуйте изменить:

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

чтобы:

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

Tomasz Golinski 21 март 2014, в 12:36

0

Похоже, вам нужно будет изменить:

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

Для того, чтобы:

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

gmann1982 21 март 2014, в 12:29

0

это не поможет мне. Это не меняет фон.
Fakt7 21 март 2014, в 14:08

0

Так просто:

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

Или если вы хотите сделать свой путь:

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

Morpheus 21 март 2014, в 11:05

Ещё вопросы

@Morpheus Морфеус: не стесняйтесь поставить его как ответ, потому что это ответ
моя вина, спасибо, но это не решает проблему
@Morpheus Морфеус Это не имеет значения для jQuery .
Вы читали статью, которую вы опубликовали сами?
Вы уверены, что изображение можно найти? Попробуйте использовать URL для изображения, относящегося к корневому каталогу: url(/images/sandpaper.png)
да, я попробовал это с ("background-color", "# 000000"); , Это работает только тогда, когда я использую $ (document) .ready (function () {, но я должен дважды щелкнуть для изменения фона.
Спасибо с $ (document) .ready (function () {это работает, но я должен нажать на ссылку, чтобы изменить фон. Вы не знаете, как это исправить?
Я не совсем уверен, почему вы должны нажать на нее два раза. Однако я рекомендую объявлять теги <script> либо в <head> либо в нижней части HTML-кода.
Я попробовал это. Я нажимаю на ссылку (фон по-прежнему по умолчанию), и после этого я должен щелкнуть везде на сайте, чтобы изменить фон.
это не поможет мне. Это не меняет фон.

9997 · Accepted Answer · 2014-03-21T12-02-00.000Z

Ваш код должен быть:

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

Кроме того, могу ли я предложить вместо этого использовать функции .addClass() .removeClass() или .toggleClass? Они предлагают более чистое решение.

Я использовал .addClass и теперь он работает отлично. Спасибо. Но это не работает в IE.