как сделать эффект вкладок

[cOAPerator]

есть 3 кнопки и соответствуюшие им блоки:
кнопка - блок
кнопка - блок
кнопка - блок
как сделать чтобы при нажатии на первую кнопку открывался 1 блок, а при нажании на любую другую, предыдущий блок скрывался, а новый соответствующий ему открывался?

[Deff]

На jQuery

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>	
#menu {
margin-top: -5px;
width: 180px;
height: 60px;
background-repeat : no-repeat;}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 7px 0;
padding: 11px;
}
#submenu, #menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background:#efeff0;
}

#menu .tabactive {
color: #000000;
    background:#777777;
}

#submenu {
padding: 3px;
height: 180px;
text-align: center;
font-size: 12px;
width: 540px;
}

.submenutext {
display: none; 
height: 40px;
}
</style>

<center><table id="tbl" style="width: 800px">
 <tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Добро пожаловать</span>
<span alt="#sm2" style="cursor: pointer;">Новости форума</span>
<span alt="#sm3" style="cursor: pointer;">Администрация</span>
<span alt="#sm4" style="cursor: pointer;">Баннеры партнеров</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
текст добро пожаловать
</div>
     <div id="sm2" class="submenutext"><br /><br />
текст новости форума
</div>
     <div id="sm3" class="submenutext"><br /><br />
текст Администрация
</div>
     <div id="sm4" class="submenutext"><br /><br />
текст баннеры партнеров
</div>

</div>
   </td>
</tr>
 </tbody>
</table></center>





<script type="text/javascript">
$(document).ready(function() {
$("#MenuTxT div.submenutext").hide();

$("#MenuTxT div.submenutext:first").show();
$("#menu span").click(function() {
    $("#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn();
    return false; });
});
</script>

span alt=

[cOAPerator]

Deff, спасибо! немного не то, но принцип понятен. у меня просто изначально все блоки скрыты.
они появляются при нажатии на кнопку. и исчезают через х-секунд если мышь не наведена на блок..
надо теперь как то совместить с этим кодом

[Deff]

cOAPerator,
эээ Открыта первая вкладка
При клике кнопки у всех класс tabactive удаляется и они скрываются, класс tabactive дописывается к активной вкладке,
Ссылка на id открываемого блока в теге alt - данной кнопки

[cOAPerator]

Deff, понял, ща буду пробовать.. спасибо!

[cOAPerator]

Deff, такс, убрал кусочек кода, и теперь при первом появлении все вкладки скрыты.
добавил вот такой код, и условие если наводил на блок, но ниче не делал, и убрал мышь с блока, то он автоматом скрывается

function doid_1(){
	$(activeDiv).slideUp(1000);
}
$(activeDiv).mouseleave(function(){
	mytime1 = setTimeout(doid_1, 1000);
});
$(activeDiv).mouseenter(function(){
	clearTimeout(mytime1);
});

А вот если не наводил мышой на активный блок, то он тоже должен скрыться
как таке сюда внедрить, ума не приложу... (мозг кипит уже)

[Deff]

добавил вот такой код, и условие если наводил на блок, но ниче не делал, и убрал мышь с блока, то он автоматом скрывается

Странно - если блок скрыт - на что там навести можно ?,
Можно пробовать наводить на кнопки

[cOAPerator]

Странно - если блок скрыт - на что там навести можно ?,
Можно пробовать наводить на кнопки

не, вы не поняли.. блок же рядом с кнопкой, поэтому он не скрывается если над ним не провести мышкой, а если провести то скрывается..
попробую объяснить алгоритм действий:
у нас кнопки слева, блоки справа. загрузили страницу 1 раз - блоки скрыты, далее
нажимаем на первую кнопку, появляется соответствующий ей блок,
при этом мышь у нас пока еще находится над кнопкой..
так вот теперь:
если навели мышой на открытый блок, но ниче не делали, и потом убрали мышь с блока, то он скрывается так-же через X секунд.(этот кусок кода я дописал сам, он выше в моем посте.)
но если не наводить на блок открытый, он также должен скрыться сам через X секунд. (этого куска кода как раз и нету сейчас, и что дописывать не могу допереть)

полный код сейчас такой

<script type="text/javascript">
$(document).ready(function() {
$("#MenuTxT div.submenutext").hide();

//$("#MenuTxT div.submenutext:first").show();
$("#menu span").click(function() {
    $("#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $(activeDiv).fadeIn();
function doid_1(){
	$(activeDiv).slideUp(1000);
}
$(activeDiv).mouseleave(function(){
	mytime1 = setTimeout(doid_1, 1000);
});
$(activeDiv).mouseenter(function(){
	clearTimeout(mytime1);
});
    return false; });
});
</script>

[Deff]

(этого куска кода как раз и нету сейчас, и что дописывать не могу допереть)

Не наю - может позже к вечеру....Тут идеалогию другую нун придумывать - на скрытый блок нельзя навести мышью, после того как он скрылся - занчит тут другой эффект нужно применять для открытых блоков, типо анимации прозрачности - если нет курсора

[cOAPerator]

на скрытый блок нельзя навести мышью, после того как он скрылся

он НЕ скрытый! он показан в данный момент.
этот кусок кода

function doid_1(){
	$(activeDiv).slideUp(1000);
}
$(activeDiv).mouseleave(function(){
	mytime1 = setTimeout(doid_1, 1000);
});
$(activeDiv).mouseenter(function(){
	clearTimeout(mytime1);
});
    return false; });
});

скрывает блок активный только в том случае, если на него навести мышой а потом убрать, и никак больше. mouseleave насколько я понимаю срабатывает "при убирании" мыши с блока открытого..

а как я написал выше, если не наводить на блок открытый, он не скрывается... на месте висит открытым.

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