ротация div'ов

maxvektor · May 8, 2009

Задача: Есть 3 кнопки. По наведению на первую показывать див "pane1" и.тд. всего три дива. Придумал так:

n=0;
function r1change ()
{
document.getElementById("pane1").style.visibility='visible';
if(n!='0')
	{
		if(n==2)
			{
				document.getElementById("pane2").style.visibility='hidden';
			}
		if(n==3)
			{
				document.getElementById("pane3").style.visibility='hidden';
			}
	}
n=1;
}

function r2change ()
{
document.getElementById("pane2").style.visibility='visible';
if(n!='0')
	{
		if(n==1)
			{
				document.getElementById("pane2").style.visibility='hidden';
			}
		if(n==2)
			{
				document.getElementById("pane3").style.visibility='hidden';
			}
	}
n=2;
}

function r3change ()
{
document.getElementById("pane3").style.visibility='visible';
if(n!='0')
	{
		if(n==2)
			{
				document.getElementById("pane2").style.visibility='hidden';
			}
		if(n==1)
			{
				document.getElementById("pane1").style.visibility='hidden';
			}
	}
n=1;
}

Срабатывает только первая функция...

хотя лажу не вижу - скоро все глаза себе высмотрю...

Может быть есть другие идеи, как поступить с этим злосчастным кодом?

Edited May 8, 2009 by maxvektor

Great Rash · May 8, 2009

// javascript

function showDiv(num) {
	var arr = [document.getElementById("pane1"), document.getElementById("pane2"), document.getElementById("pane3")];
	for (i=0; i<arr.length; i++) {
		 arr[i].style.visibility = 'hidden';
	}
	arr[num].style.visibility = 'visible';
}

<!-- HTML -->
<input type="button" onclick="showDiv(1);" value="pane1" />
<input type="button" onclick="showDiv(2);" value="pane1" />
<input type="button" onclick="showDiv(3);" value="pane1" />

Не уверен, что массив правильно составил, но как-то так.

UPD: ой сорри попутал... конечно же так:

<!-- HTML -->
<input type="button" onclick="showDiv(0);" value="pane1" />
<input type="button" onclick="showDiv(1);" value="pane1" />
<input type="button" onclick="showDiv(2);" value="pane1" />

Edited May 8, 2009 by Great Rash

maxvektor · May 10, 2009

.style.visibility не подходит...

дело в том, что после того, как див появляется на странице, он не исчезает, а становится полностью прозрачным. Это значит, что следующий будет под ним, а не на его месте, может попробовать абсолютное позиционирование? это не собьет верстку?

s0rr0w · May 10, 2009

Без JS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Три девицы под окном...</title>
 <style type="text/css">
 	body { font: normal 9pt tahoma }
 	.buttonsBlock { overflow: hidden; background: #ccc; border: 1px solid #bbb; padding: 5px;}
 	.button { float: left; margin-right: 5px; padding: 5px 15px; background: #999; cursor: pointer; }
 	.buttonHint { position: absolute; top: 60px; left: 15px; display: none; }
 	.button:hover .buttonHint { display: block }
 </style>

</head>
<body>

	<div class="buttonsBlock">
		<div class="button">
			Батон номер 1
			<div class="buttonHint">Это подсказка для батона номер 1</div>
		</div>
		<div class="button">
			Батон номер 2
			<div class="buttonHint">Это подсказка для батона номер 2</div>
		</div>
		<div class="button">
			Батон номер 3
			<div class="buttonHint">Это подсказка для батона номер 3</div>
		</div>
	</div>
</body>
</html>

maxvektor · May 11, 2009

Все здорово, кроме одного - хинты исчезают после увода мышки с кнопки. минус вод в чем - мне нужно вполне осмысленное содержимое. Больше того в диви скрипт вида document.write('bla-bla-bla')... Может быть в jQuery есть готовый метод...

Очень нужна помощь, ночи не сплю :rolleyes:

s0rr0w · May 11, 2009

А кто вам мешает заменить текст на более осмысленное? Или вы думаете, что jQuery за вас будет тексты писать?

maxvektor · May 11, 2009

не в бровь, а в глаз.

Я получаю с сервера три страницы вида document.write('—————-')

Загоняю его в див. Этот текст представляет собой заголовки материалов трех рубрик.

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

такая пот задачка...

document.getElementById("pane2").style.display='inline';

/*document.getElementById("pane3").style.display='none';*/

с закоментированным скрытием первой панели код работает...

т.е. добавить див, пока виден второй можно.

Где я ошибся?

maxvektor · May 11, 2009

Я таки дурак, сорри, проблема решена.

Работает такой вариант:

HTML

<div id="panel">
<script type="text/javascript" src="...1"></script>
</div>
<div id="pane">
<script type="text/javascript" src="...2"></script>
</div>
<div id="pan">
<script type="text/javascript" src="...3"></script>
</div>

CSS

#panel{
display:none;
}
#pane{
display:none;
}
#pan{
display:none;
}

js

function r1change (){
document.getElementById("panel").style.display = 'inline';
document.getElementById("pane").style.display = 'none';
document.getElementById("pan").style.display = 'none';}

function r2change (){
document.getElementById("pane").style.display = 'inline';
document.getElementById("panel").style.display = 'none';
document.getElementById("pan").style.display = 'none';}

function r3change (){
document.getElementById("pan").style.display = 'inline';
document.getElementById("panel").style.display = 'none';
document.getElementById("pane").style.display = 'none';}

Извините, что напряг и спасибо за помощь. :rolleyes:

Edited May 11, 2009 by maxvektor

s0rr0w · May 11, 2009

Приятно, когда человек сам разобрался.

Молодец!

Интересно узнать, как усовершенствовать твой код?

Great Rash · May 12, 2009

.style.visibility не подходит...

У самого главное в первом посте visibility было...

keltanas · May 14, 2009

Не понимаю, чего вы паритесь так. Есть же готовое удачное решение http://jqueryui.com/demos/tabs/

а вместо визибилити display = 'none' и display = 'block' не пробовали?

s0rr0w · May 14, 2009

Не понимаю, чего вы паритесь так. Есть же готовое удачное решение http://jqueryui.com/demos/tabs/

Ага, для такой примитивной задачи грузить 60к фреймворка, это умно, да. Человек разобраться хочет, и фреймворки ему будут только помехой.

Sign In

ротация div'ов

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information