Смена Div по ссылке
Добрый день Всем. Хочу получить блок с плавно меняющимся содержанием при нажатии на соответствующий пункт меню... Вот такой код получился, но при нажатии на любую ссылку открывается текст 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> |
Цитата:
|
Это чтобы дивы друг под другом находились.. - при затухании одного второй ровно под ним... Не то что-то написала?
|
Да, вижу... и без этого они друг под другом... я просто в этом плохо разбираюсь... только начинаю... мучаюсь с этим кодом уже второй день, а получить что надо не могу(( ПОМОГИТЕ!!!
|
#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" и только после этого выполнять появление нового дива. В моем варианте диваны невидимые, до вызова функции. |
Короче код получился такой:
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 { Табы получились очень замечательные, появляются и исчезают по нажатию, если не скрыть активный диван, при переключении на другой срабатывает HideAll() и после него показывается нужный диван, тоесть все отличненько работает. Надеюсь это кому-то поможет. Отдельное спасибо моему другу, мегопупертрупер программисту Appex'у |
Часовой пояс GMT +3, время: 17:35. |