Javascript для изменения фонового изображения в зависимости от области пользователя - PullRequest
Новая
       0

Javascript для изменения фонового изображения в зависимости от области пользователя

2 голосов
/ 17 ноября 2011

Моя навигация имеет 5 кнопок [Домой, О нас, Услуги, События, Контакт], и у каждой кнопки есть фоновое изображение «blue-button.png». Я хочу переключить его на «white-button.png», когда пользователь находится в этом разделе. Я хотел бы, чтобы это было так просто, как: active, но это не так, и я объясню почему;

Весь контент отображается в оверлее. При создании веб-сайта вы никогда не покидаете страницу индекса, но содержимое загружается на страницу индекса. Вот почему a: active не работает.

Теперь, например, когда пользователь открывает страницу «О программе», появляется контент (который я буду называть «О программе»), который содержит ссылки на «О себе», «О вас» и «Часто задаваемые вопросы». ». Я хочу, чтобы кнопка «О программе» меняла фоновые изображения (на белые) всякий раз, когда пользователь находится в какой-либо области, относящейся к «О программе» (О главном, Обо мне, О вас, Часто задаваемые вопросы) ... Мне также нужна кнопка изменить цвет на синий, когда пользователь перейдет в другой раздел (например, контакт), а затем кнопка контакта станет белой.

Единственный способ, с помощью которого я заметил, где находится пользователь, это то, что наложение, на котором он находится, имеет стиль css display:block, в то время как все остальные скрыты с display:hidden ...

Итак, я думал, что javascript похож на это:

if (о главном, обо мне, о вас, часто задаваемые вопросы): display:block
{ $(".about").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".about").css('background-image', 'url(../img/blue-button.png)' }

if (контакт): display:block
{ $(".contact").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".contact").css('background-image', 'url(../img/blue-button.png)' }

у кнопок навигации есть такие классы, как:
<a class="about">
<a class="contact">

в то время как наложения имеют идентификаторы, такие как:
<div class="simple_overlay" id="about">
<div class="simple_overlay" id="contact">

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

Огромное спасибо за потраченное время, Этот действительно убивает меня!

1 Ответ

2 голосов
/ 17 ноября 2011

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

CSS

.navigation a.selected
{
  background-image: url(../img/white-button.png);
}

Javascript - Я вижу, что вы используете jQuery, чтобы упростить это.Добавьте приведенный ниже код в раздел инициализации.Я не тестировал этот скрипт, но он должен быть довольно близок. 

// Add click event handler to all navigation links
$('.navigation a').click(function() {
  // First remove selected class from all navigation links
  $('.navigation a').removeClass('selected');  
  // Now add the selected class to the current link
  $(this).addClass('selected');
});

РЕДАКТИРОВАТЬ: Я немного подправил и добавил jsfiddle, чтобы вы могли увидеть его в действии: http://jsfiddle.net/VCaSV/

...