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)

Цитата:

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

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

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

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

Вот код:

<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

Цитата:

Сообщение от 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>