Перейти к содержанию
cha0s

[Решено] Помогите с Jquery

Рекомендуемые сообщения

Имеются такие блоки

<div class="faq-heading" id="one"><img class="number" id="1" src="/numbers/1.png" />1</div>
<div class="faq-heading" id="two"><img class="number" id="2" src="/numbers/2.png" />2</div>
<div class="faq-heading" id="three"><img class="number" id="3" src="/numbers/3.png" />3</div>
<div class="faq-heading" id="four"><img class="number" id="4" src="/numbers/4.png" />4</div>
<div class="faq-heading" id="five"><img class="number" id="5" src="/numbers/5.png" />5</div>

Есть короче картинки тогда когда на блок нажали она другого цвета и когда блок не активный то она другая дефаулдная. Как сделать на Jquery так чтоб по тому блоку которому кликнули картинка подставлялась в href уже другая, а все остальные блоки становились по дефаулду(если например пользователь до этого переходил в другой блок - там картинка должна обратно стать дефаулдной), ну то есть я как понимаю пробегаем циклом по этим 5-ти картинкам тот блок который активен меняем картинку на другую, а все остальные становятся на дефаулд, помогите с реализацией.

 

Вот еще покажу на картинке пример, вот эти блоки(они схлопнуты у каждого есть внутри описание) у каждого есть картинка с номером, при клике по блоку чтоб подставлялась другая картинка с другим фоном уже, а все остальные так и остаются таким-же... ну думаю объяснил понятно)) типа что-то наверное будет та вкладка которая активна то ей $(this).css('href', 'xxxxxxxxxxxxx'); а все остальные заменились на стандартные.

 

(для каждого блока своя картинка будет, так что при каждом выбранном блоке своя уникальная картинка будет подставляться)

 

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA.JPG

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Попробуйте так

 

1. Создать стиль

.image-hide { display: none; }

2. Добавить изображение, которое должно отображаться при активном блоке

<div class="faq-heading" id="one"><img class="number" id="1" src="/numbers/1.png" /><img class="number-active" src="FIRST-ACTIVE.png" />1</div>

Назовем класс с "активным" изображением number-active

 

3. Добавить туда же класс image-hide

<div class="faq-heading" id="one"><img class="number" id="1" src="/numbers/1.png" /><img class="number-active image-hide" src="FIRST-ACTIVE.png" />1</div>

4. Сделать то же самое для остальных вкладок.

class="number-active image-hide"

остается неизменным, меняете только src=""

 

5. Заменить

<script type="text/javascript"><!--
$('.faq-block .faq-heading').bind('click', function() {
	$(".faq-content").slideUp("slow");
	$(".faq-heading").removeClass('active');

	if ($(this).parent().find('.faq-content').is(":visible")) {
		$(this).parent().find('.faq-content').slideUp('slow');
	} else {
		$(this).parent().find('.faq-content').slideDown('slow');
		$(this).addClass('active');
	}
});
//--></script>

на

<script type="text/javascript"><!--
$('.faq-block .faq-heading').bind('click', function() {
	$(".faq-content").slideUp("slow");
	$(".faq-heading").removeClass('active');
	$(".number").removeClass('image-hide');
	$(".number-active").addClass('image-hide');

	if ($(this).parent().find('.faq-content').is(":visible")) {
		$(this).parent().find('.number').removeClass('image-hide');
		$(this).parent().find('.number-active').addClass('image-hide');
		$(this).parent().find('.faq-content').slideUp('slow');
	} else {
		$(this).parent().find('.faq-content').slideDown('slow');
		$(this).parent().find('.number').addClass('image-hide');
		$(this).parent().find('.number-active').removeClass('image-hide');
		$(this).addClass('active');
	}
});
//--></script>
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
burr

 

Спасибо большое! все получилось!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.