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)

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

Код:

<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>

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

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>

Спасибо просто супер, то, что доктор прописал!!!)
Вообще делаю доску объявлений и там таких блоков на странице будет штук 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>

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

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

Цитата:

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

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

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

<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 в цикле выводить!
Вот как то так! И еще спасибо большое реально чувствуется поддержка!

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>

Цитата:

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

Спасибо

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

Цитата:

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

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

:lol: