Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.04.2011, 15:35
Новичок на форуме
Отправить личное сообщение для ketvil Посмотреть профиль Найти все сообщения от ketvil
 
Регистрация: 25.04.2011
Сообщений: 3

Смена 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>
Ответить с цитированием
  #2 (permalink)  
Старый 25.04.2011, 16:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от ketvil
float:left; 
position:absolute;
Для чего такое сочетание?
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2011, 16:05
Новичок на форуме
Отправить личное сообщение для ketvil Посмотреть профиль Найти все сообщения от ketvil
 
Регистрация: 25.04.2011
Сообщений: 3

Это чтобы дивы друг под другом находились.. - при затухании одного второй ровно под ним... Не то что-то написала?
Ответить с цитированием
  #4 (permalink)  
Старый 25.04.2011, 16:09
Новичок на форуме
Отправить личное сообщение для ketvil Посмотреть профиль Найти все сообщения от ketvil
 
Регистрация: 25.04.2011
Сообщений: 3

Да, вижу... и без этого они друг под другом... я просто в этом плохо разбираюсь... только начинаю... мучаюсь с этим кодом уже второй день, а получить что надо не могу(( ПОМОГИТЕ!!!
Ответить с цитированием
  #5 (permalink)  
Старый 10.06.2011, 00:59
Новичок на форуме
Отправить личное сообщение для TomFarr Посмотреть профиль Найти все сообщения от TomFarr
 
Регистрация: 10.06.2011
Сообщений: 2

#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 в 01:02.
Ответить с цитированием
  #6 (permalink)  
Старый 10.06.2011, 13:31
Новичок на форуме
Отправить личное сообщение для TomFarr Посмотреть профиль Найти все сообщения от TomFarr
 
Регистрация: 10.06.2011
Сообщений: 2

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена background у div AlexMak Общие вопросы Javascript 11 17.05.2012 14:34
Не получается по щелчку на ссылке вывести div по центру экрана! Триви jQuery 6 11.03.2011 10:35
Смена текста в ссылке krol jQuery 4 29.01.2011 20:42
Js + moo tools плавная смена div mansoff Events/DOM/Window 1 03.02.2010 11:11
Задачка: вывод div по ссылке alt5000 Элементы интерфейса 19 28.10.2008 21:21