Изменение фонового изображения элемента в jQuery при загрузке страницы?

Я немного застрял прямо сейчас, у меня в основном есть элемент заголовка в DOM, и у меня есть фоновое изображение, жестко закодированное в CSS для индексной страницы.Изменение фонового изображения элемента в jQuery при загрузке страницы?

Что я искал, так это для изменения этого изображения на разных страницах. Я думал, что это будет довольно простая вещь.

$('header').css("background-image","url(assets/img/consulting.png)")

Я понимаю, что нет триггера события, но у меня создалось впечатление, что мне не нужно будет это делать.

Также мой CSS-файл и файл для страницы, в которую я добавляю jQuery, находятся в разных папках, а также папка img ... Я не знаю, как я должен обращаться к URL-адресу в коде jQuery. Должно ли это быть как бы перемещение из файла CSS или HTML-файла?

Спасибо, ребята, извините, если я пропустил что-то действительно очевидное здесь.

источник

2012-05-23 Dacu

Это подход, который я бы взял, просто чтобы удалить большую часть css из jQuery, хотя вы можете просто хотеть событие click.

Я сделал бы это для каждой страницы.

<body class="home"> 
<body class="about"> 
<body class="contact">

Затем в CSS сделать

.home header { background-image: url(../assets/img/consulting.png"; } 
.about header { background-image: url(../assets/img/consulting2.png"; } 
.contact header { background-image: url(../assets/img/consulting3.png"; }

Если ваш сайт один индекс, который загружает содержимое других страниц, не обновляя их, вы можете сделать.

$(function(){ 
    $('#aboutlink').click(function(e){ 
     $('body').removeClass().addClass('about'); 

     //your other snippets here 

     e.preventDefault(); 
    }); 
});

источник

2012-05-23 22:52:42

Спасибо большое. Я собираюсь пойти с этим подходом, поскольку, вероятно, лучше подумать, что не у всех есть JavaScript.Я все еще не могу понять, почему то, что я изначально сделал, не получилось! Даже не получил ошибку. jQuery тайна, я думаю! – Dacu

Cheers. Я бы сказал, что большинство браузеров имеют JS в эти дни, но это лучшее решение IMO, потому что CSS загружается быстрее и используется в соответствующем контексте. Использование JS для выполнения задания, предназначенного для таблиц стилей, немного для меня. –

Чтобы изменить начальное состояние страницы, вам нужно подождать, пока вы запустите свой javascript, пока страница не будет загружена.

Существует несколько способов сделать это. Наиболее распространенными в JQuery являются:

1) Используйте document.ready():

$(document).ready(function() { 
    $('header').css("background-image","url(assets/img/consulting.png)") 
});

2) Поместите код внутри <script> тегов, но в конце тела (непосредственно перед тегом </body>), поэтому он запускается после того, как HTML уже проанализирован.

Вы, конечно же, должны убедиться, что ваш URL-адрес изображения верен и имеет соответствующую спецификацию пути, которую можно найти в браузере.

Если вы управляете HTML/CSS страницы, гораздо лучше просто поместить исходное состояние в стили CSS для страницы, так как страница будет просто сделана правильно с самого начала, а не будет отображать один затем используйте JS, чтобы изменить его по-другому.

источник

2012-05-23 22:46:55 jfriend00

Спасибо за совет, я попробовал все, о чем вы упоминали, и я до сих пор не испытываю никакой радости. Я не могу использовать CSS для изменения фонового изображения, потому что он просто изменит фоновое изображение на другой странице. Если бы я хотел быть действительно ленивым кодером, я мог бы добавить класс для каждого элемента заголовка отдельных страниц и дать каждому свое собственное фоновое изображение, но я бы предпочел! : P – Dacu

@ Dacu - Если вы можете поместить javascript на одну конкретную страницу, вы также можете разместить CSS на этой странице. И CSS разбирается намного раньше. Я не понимаю, почему вы не можете использовать CSS или почему JS не работает. Можете ли вы предоставить ссылку на страницу? – jfriend00

Изменение фонового изображения элемента в jQuery при загрузке страницы?

ответ

Смежные вопросы