Добрый день Всем. Хочу получить блок с плавно меняющимся содержанием при нажатии на соответствующий пункт меню... Вот такой код получился, но при нажатии на любую ссылку открывается текст 1.. Я новичок, так что не ругайтесь на корявость кода... Помогите плиз)))
<style type="text/css" border="0">
div#uzel {position:relative; height:100px; margin-left: 5px;}
div#uzel div {float:left; position:absolute; list-style: none;}
div#uzel div.show {z-index:300;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#uzel div').css({opacity: 0.0}); /** body (здесь и далее) означает, что эффект применяется ко всей странице. Можно изменить на идентификаторы любых элементов (#content, .comments и т.д.) */
$('div#uzel div:first').css({opacity: 1.0}, 2000); /** время появления в миллисекундах */
var curr = $('div#uzel div:first').get(0).className.toString().substr(1,1 ); //номер видимого элемента.
var a; //переменная будет хранить номер управляюшей ссылки и блока
$('ul.control a').click(function(){ //функция для события clik по управляюше ссылке.
a=this.className.toString().substr(1,1); //определяеться номер управляющей ссылки.
if (a != curr){ // сравние номер управлюшей ссыли с номер видимого блока.
$('div.b'+curr).fadeOut("slow", function(){ //Анимация исчезновние видимого блока.
$('div.b'+a).fadeIn("slow"); //Анимация появления нового блока.
curr = a; //записываеть номер текущего видимого блока.
});
}
});
});
</script>
<ul class="control">
<li><a href="#first" class="b1">First COntnet</a></li>
<li><a href="#second" class="b2">Second COntnet</a></li>
<li><a href="#third" class="b3">Third COntnet</a></li>
</ul>
<div id="uzel">
<div class="b1">
Текст 1
</div>
<div class="b2">
Текст 2
</div>
<div class="b3">
Текст 3
</div>
</div>