Смена Div по ссылке

[ketvil]

Добрый день Всем. Хочу получить блок с плавно меняющимся содержанием при нажатии на соответствующий пункт меню... Вот такой код получился, но при нажатии на любую ссылку открывается текст 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>

[ksa]

float:left; 
position:absolute;

Для чего такое сочетание?

[ketvil]

Это чтобы дивы друг под другом находились.. - при затухании одного второй ровно под ним... Не то что-то написала?

[ketvil]

Да, вижу... и без этого они друг под другом... я просто в этом плохо разбираюсь... только начинаю... мучаюсь с этим кодом уже второй день, а получить что надо не могу(( ПОМОГИТЕ!!!

[TomFarr]

#t { 
margin: 0;
padding: 0;
position: absolute;
top: 200px;
left: 33%;
width: 645px;
border: 0;
display: none;
}
#t2 { 
margin: 0;
padding: 0;
position: absolute;
top: 200px;
left: 33%;
width: 645px;
border: 0;
display: none;
}
#t3 { 
margin: 0;
padding: 0;
position: absolute;
top: 200px;
left: 33%;
width: 645px;
border: 0;
display: none;
}

<!--

function ablok() {
var c=document.getElementById('t');
if (c.style.display=='block')
{c.style.display='none';}
else
{c.style.display='block';}
}
function bblok() {
var c=document.getElementById('t2');
if (c.style.display=='block')
{c.style.display='none';}
else
{c.style.display='block';}
}
function cblok() {
var c=document.getElementById('t3');
if (c.style.display=='block')
{c.style.display='none';}
else
{c.style.display='block';}
}


//-->

Вот этот код у меня меняет дивы по onclick=xblok(), но в нем пока есть одна загвоздка, вызваный слой нужно закрывать перед открытием нового, иначе за более верхним слоем не видно нижнего. Но мои знания JS на столько малы, что я не знаю как прикрутить проверку. Хотя есть одна идея задавать рекурсивно функцию на убирание "c" и только после этого выполнять появление нового дива.
В моем варианте диваны невидимые, до вызова функции.

[TomFarr]

Короче код получился такой:

function ShowTab(n){ HideAll(); Showni(n); }
function HideAll(){document.getElementById('t3').style.display='none';document.getElementById('t2').style.display='none';document.getElementById('t1').style.display='none';}
function Showni(n){ document.getElementById(n).style.display='block';}
function ShowHideTab(n){if(document.getElementById(n).style.display=='block')HideAll();else ShowTab(n);}

Стили:

#t1 { 
margin: 0;
padding: 0;
position: absolute;
top: 200px;
left: 33%;
width: 645px;
border: 0;
display: none;
}
#t2 { 
margin: 0;
padding: 0;
position: absolute;
top: 200px;
left: 33%;
width: 645px;
border: 0;
display: none;
}
#t3 { 
margin: 0;
padding: 0;
position: absolute;
top: 200px;
left: 33%;
width: 645px;
border: 0;
display: none;
}

Вызывать по ShowHide('t'+n) где t+n это номер дивана.

Табы получились очень замечательные, появляются и исчезают по нажатию, если не скрыть активный диван, при переключении на другой срабатывает HideAll() и после него показывается нужный диван, тоесть все отличненько работает. Надеюсь это кому-то поможет.
Отдельное спасибо моему другу, мегопупертрупер программисту Appex'у