Смена div

[margolen]

Уважаемые,

Помогите блондинке справиться с непривычным делом!

Сразу скажу, что верстка не моя специальность, так вышло, что мне выпала сомнительная честь этим заняться.

Ситуация следующая:

Есть 2 div, назовем a & b;

Суть конструкции:

Две локальные ссылки:

<a href="div_a">

<a href="div_b">

Ниже располагаются 2 дива:

<div id="div_a"></div> (div_a по умолчанию, div_b скрыт)

<div id="div_b"></div>

И по клику на href="div_b" вместо блока div_а, должен появиться блок div_b. И не где-то там, а именно вместо div_a.

Ну и обратная операция - по клику на href=div_a снова виден блок div_a.

Все это средствами jquery, чтобы был выпадающий эффект

Надеюсь, доступно объяснила. Серфила не один десяток страниц и пишу на форум от безысходности.

Рассчитываю на вашу помощь.

[Switch74]

<style>
#div{position:relative;width:500px;height:100px;}
#div_a,#div_b{position:absolute;left:0px;top:0px;width:500px;height:100px;}
#div_a{display:block;z-index:1;background:#090;}
#div_b{display:none;z-index:2;background:#009;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	$('a.div_a').click(function(){
	   $('#div_a').slideDown(400,function(){
		  $('#div_b').hide().css({'z-index':'2'});
		  $(this).css({'z-index':'1'});
	   });
	});
	$('a.div_b').click(function(){
	   $('#div_b').slideDown(400,function(){
		  $('#div_a').hide().css({'z-index':'2'});
		  $(this).css({'z-index':'1'});
	   });
	});
});
</script>
<div>
	<a class="div_a">div_a</a><br>
	<a class="div_b">div_b</a><br>
</div>
<div id="div">
	<div id="div_a">div_a</div>
	<div id="div_b">div_b</div>
</div>

[margolen]

Спасибо!!! Сейчас буду тестировать

[margolen]

Switch74, я не могу прочесть ваше сообщение в ЛС!

[Switch74]

а я ничего не посылал, это наверно форум автоматически шлет, мне пришло сообщение, что вы меня в друзья добавили

[margolen]

Switch74,

Я немного запуталась опять

Как сделать, чтобы если активен div_a, то ссылка на div_a приобретала class="active", а если div_b развернуть, то ссылка div_b class="active"??

In stok: <a class="news_u"> BL</a>  <a class="news_s"> SB</a>

		<div id="class_news">

		<div style="z-index: 1;" id="news_u">

		.........

                .........

		</div>

		<div style="display: none; z-index: 2;" id="news_s">

		.........

		</div>

		</div>


<script>
$(document).ready(function()
{
        $('a.news_u').click(function(){
           $('#news_u').slideDown(200,function(){
                  $('#news_s').hide().css({'z-index':'2'});
                  $(this).css({'z-index':'1'});
           });
        });
        $('a.news_s').click(function(){
           $('#news_s').slideDown(200,function(){
                  $('#news_u').hide().css({'z-index':'2'});
                  $(this).css({'z-index':'1'});
           });
        });
});
</script>

Edited March 30, 2012 by margolen

[margolen]

Пожалуйста, не оставляйте без внимания мой вопрос

[Switch74]

в jquery .addClass() .removeClass() поищи

[margolen]

в jquery .addClass() .removeClass() поищи

А внутри функции не получится?

<script>
$(document).ready(function()
{
        $('a.news_u').click(function(){
           $('#news_u').slideDown(200,function(){
                  $('#news_s').hide().css({'z-index':'2'});
                  $(this).css({'z-index':'1'});
           });
        });
        $('a.news_s').click(function(){
           $('#news_s').slideDown(200,function(){
                  $('#news_u').hide().css({'z-index':'2'});
                  $(this).css({'z-index':'1'});
           });
        });
});
</script>

[margolen]

в jquery .addClass() .removeClass() поищи

Получилось!!!

<script>
$(document).ready(function(){
    $("#s_href").click(function(){
        $('#u_href').removeClass('news_href_active');
		$('#u_href').addClass('news_href');
		$(this).addClass('news_href_active');
    });
	 $("#u_href").click(function(){
        $('#s_href').removeClass('news_href_active');
		$('#s_href').addClass('news_href');
		$(this).addClass('news_href_active');
    });
});
</script>

[margolen]

$('#div_b').hide().css({'z-index':'2'});

$(this).css({'z-index':'1'});

Блондинка в шоке читает мануал по JQ. Обязательно ли в моем случае использовать слои? Не достаточно просто hide(). show()?

[Switch74]

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

у тебя ведь они находятся друг над другом поочередно, это нужно учитывать, если использовать hide и show без интервала, то они будут резко меняться, можно еще воспользоваться такой схемой:

при открытии блока 'b' сначала плавно уходит блок 'a', а потом появляется плавно 'b'

или

применять к ним анимацию одновременно, тоже получится интересный эффект

в этих случаях z-index использовать не обязательно, хотя с ним получится еще одна немного другая анимация

а еще в комплекте с выезжанием можно использовать прозрачность opacity - с ней очень красиво получается, но скрипт станет чуток посложнее

Edited April 1, 2012 by Switch74

[margolen]

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

у тебя ведь они находятся друг над другом поочередно, это нужно учитывать, если использовать hide и show без интервала, то они будут резко меняться, можно еще воспользоваться такой схемой:

при открытии блока 'b' сначала плавно уходит блок 'a', а потом появляется плавно 'b'

или

применять к ним анимацию одновременно, тоже получится интересный эффект

в этих случаях z-index использовать не обязательно, хотя с ним получится еще одна немного другая анимация

а еще в комплекте с выезжанием можно использовать прозрачность opacity - с ней очень красиво получается, но скрипт станет чуток посложнее

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

  $('a#u_href').click(function(){
          	$('#news_s').hide().css({'z-index':'2'});
                $('#news_u').slideDown(300,function(){
                $(this).css({'z-index':'1'});
           });
        });

Блондинка учится.

Edited April 1, 2012 by margolen