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

[cha0s]

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

<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'); а все остальные заменились на стандартные.

 

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

 

[burr]

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

 

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>

[cha0s]

burr

 

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