Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Смена Div по ссылке (https://javascript.ru/forum/dom-window/16849-smena-div-po-ssylke.html)

ketvil 25.04.2011 15:35

Смена 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>

ksa 25.04.2011 16:01

Цитата:

Сообщение от ketvil
float:left; 
position:absolute;

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

ketvil 25.04.2011 16:05

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

ketvil 25.04.2011 16:09

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

TomFarr 10.06.2011 00:59

#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 10.06.2011 13:31

Короче код получился такой:
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'у


Часовой пояс GMT +3, время: 17:35.