Javascript-форум - Замена одного дива на другой

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Замена одного дива на другой (https://javascript.ru/forum/dom-window/12755-zamena-odnogo-diva-na-drugojj.html)

ybiza

01.11.2010 19:37

Замена одного дива на другой

Код:

<script language="JavaScript1.2">

<!--



var ns6=document.getElementById&&!document.all?1:0



var head="display:''"

var folder=''



function expandit(curobj){

folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+0].style

if (folder.display=="none")

folder.display=""

else

folder.display="none"

}



//-->

</script>



<h3 style="cursor:hand" onClick="expandit(this)">Нажмите сюда</h3>

<span style="display:none" style=&{head};>

Тут может быть все, что вы захотите, от картинок до текста или рекламы.

</span>

При нажатии на кнопку этот скрипт проявляет слой, подскажите пожалуйста как сделать так чтобы один слой убрался а другой появлялся.

Структура примерно такая.

Код:

<h3 style="cursor:hand" onClick="expandit(this)">Нажмите сюда</h3>

<p  style=&{head};>

Тут может быть все, что вы захотите, от картинок до текста или рекламы.

</p>

<p style="display:none" style=&{head};>

Тут может быть все, что вы захотите, от картинок до текста или рекламы.

</p>

И таких штук на странице много будет как это сделать?

ksa	02.11.2010 11:51

ybiza, структура у тебя какая-то убийственная. :blink: Заголовок как ссылка...

Цитата:

Сообщение от ybiza

как это сделать?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
.off {
	display: none;
}
</style>
<script>
function On() {	
	var o=document.getElementById('info')
	o=o.getElementsByTagName('p')
	var ok=false
	for (var i=0; i<o.length; i++) {
		if (o[i].className=='on') {
			o[i].className='off'
			if (o[i+1]) {
				o[i+1].className='on'
				ok=true
			}
			break
		}
	}
	if (!ok) {
		o[0].className='on'
	}
}
</script>
</head>
<body>
<a href='#' onclick='On(); return false;'>Нажмите сюда</a>
<div id='info'>
	<p name='txt' class='on'>
		1. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
	<p name='txt' class='off'>
		2. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
	<p name='txt' class='off'>
		3. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
</div>
</body>
</html>

ybiza

02.11.2010 12:13

Спасибо просто супер, то, что доктор прописал!!!)
Вообще делаю доску объявлений и там таких блоков на странице будет штук 10 возможно ли Сделать команду: применить к первому нижнему div id =info таким обзором каждая ссылка активатор будет запускать не все div с id = info, а только ниже стоящий возможно ли такое. И как это прописать?

<a href='#' onclick='On(); return false;'>Нажмите сюда</a>
<div id='info'>
    <p name='txt' class='on'>
        1. Краткий текст
    </p>
    <p name='txt' class='off'>
        2. Полный текст
    </p>
</div>

vladlen

02.11.2010 15:14

ID не CLASS и должен быть на странице только один!

ybiza

02.11.2010 15:41

Тогда как решить эту проблему? Я в javas не силен но знаю что есть nextSibling может быть кто нибудь скажет как сделать как сделать, можно ли использовать this.nextSibling class="info" или что то в этом роде

ksa	02.11.2010 20:09

Цитата:

Сообщение от ybiza

блоков на странице будет штук 10 возможно

Ты бы тогда макет какой-то сделал... Поскольку пока у тебя были только одни абзацы. Теперь какие-то блоки...

ybiza

02.11.2010 20:44

<a href='#' onclick='On(); return false;'>Нажмите сюда</a>
<div id='info'>
    <p name='txt' class='on'>
        1. Краткий текст
    </p>
    <p name='txt' class='off'>
        2. Полный текст
    </p>
</div>

Вот это так называемый "блок" я взял ваш вариант ksa :write: их на странице может быть до десяти, необходимо чтобы каждая ссылка открывала только 1 ниже стоящий блок DIV с id или class которого info.

Суть этого: Чтобы можно было их на php в цикле выводить!
Вот как то так! И еще спасибо большое реально чувствуется поддержка!

ksa	03.11.2010 11:38

ybiza, а если таки чуть-чуть напрячь свои извилины? :)

<!DOCTYPE html>
<html>
<head>
<style>
.off {
	display: none;
}
</style>
<script>
function On(N) {	
	var o=document.getElementById('info'+N)
	o=o.getElementsByTagName('p')
	var ok=false
	for (var i=0; i<o.length; i++) {
		if (o[i].className=='on') {
			o[i].className='off'
			if (o[i+1]) {
				o[i+1].className='on'
				ok=true
			}
			break
		}
	}
	if (!ok) {
		o[0].className='on'
	}
}
</script>
</head>
<body>
<a href='#' onclick='On(1); return false;'>Нажмите сюда 1</a>
<div id='info1'>
	<p name='txt' class='on'>
		1.1. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
	<p name='txt' class='off'>
		1.2. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
	<p name='txt' class='off'>
		1.3. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
</div>
<a href='#' onclick='On(2); return false;'>Нажмите сюда 2</a>
<div id='info2'>
	<p name='txt' class='on'>
		2.1. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
	<p name='txt' class='off'>
		2.2. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
	<p name='txt' class='off'>
		2.3. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
	<p name='txt' class='off'>
		2.4. Тут может быть все, что вы захотите, от картинок до текста или рекламы.
	</p>
</div>
</body>
</html>

ksa	03.11.2010 11:39

Цитата:

Сообщение от ybiza

Спасибо

Таки не прибавилось... :) Хотя и

Цитата:

Сообщение от ybiza

реально чувствуется поддержка!

:lol:

Gozar

03.11.2010 11:52

удалено.

ybiza

03.11.2010 12:05

Цитата:

а если таки чуть-чуть напрячь свои извилины?

Ksa Такая конструкция возникала в голове, но знания сила!!!
Всем Спасибо пример то что нужно, отдельное спасибо KSA!!! Happy End!

ksa	03.11.2010 12:11

Gozar, убедил, чертяка. :lol:

Djohan

29.11.2010 06:54

Добрый день У меня такой вопрос. У меня есть горизонтально верхнее меню на странице. Хочу реализовать так чтобы при нажатие например первого меню на страницы появлялся скрытый див относящийся к этому меню. При нажатии на второй скрывался первый и появлялся див от второго меню. Ну вообщем чтобы при онклике на нужное меню все скрывалось и оставалось только одно.

Вот код:

<body>
<script type="text/javascript"> function displ(ddd) { if (document.getElementById(ddd).style.display == 'none') {document.getElementById(ddd).style.display = 'block'} else {document.getElementById(ddd).style.display = 'none'} } </script>

<a href="javascript: displ('1')">Описание</a> | <a href="javascript: displ('2')">Свойства</a> | <a href="javascript: displ('3')">Технические характеристики</a> | <a href="javascript: displ('4')">Использование</a>
<div id="1" style="display: none;">ТЕКСТ</div>
<div id="2" style="display: none;">ТЕКСТ2</div>
<div id="3" style="display: none;">ТЕКСТ3</div>
<div id="4" style="display: none;">ТЕКСТ4</div>

</body>

Вот сайт где этот пример: http://kexian.ru/?page_id=6

ksa	29.11.2010 08:41

Цитата:

Сообщение от Djohan

чтобы при онклике на нужное меню все скрывалось и оставалось только одно

Как вариант...

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
</style>
<script type="text/javascript">
function displ(N) { 
	var o=document.getElementById('container')
	var o=o.getElementsByTagName('div')
	for (var i=0; i<o.length; i++) {
		o[i].style.display = (i==N)? 'block': 'none'
	} 
} 
</script>
</head>
<body>
<p>
	<a href="javascript: displ(0)">Описание</a> | 
	<a href="javascript: displ(1)">Свойства</a> | 
	<a href="javascript: displ(2)">Технические характеристики</a> | 
	<a href="javascript: displ(3)">Использование</a>
</p>	
<div id='container'>
	<div id="m0" style="display: none;">ТЕКСТ0</div>
	<div id="m1" style="display: none;">ТЕКСТ1</div>
	<div id="m2" style="display: none;">ТЕКСТ2</div>
	<div id="m3" style="display: none;">ТЕКСТ3</div>
</div>
</body>
</html>

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