Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Меню на DIV'ах и DHTML (https://javascript.ru/forum/dom-window/22013-menyu-na-div%27akh-i-dhtml.html)

Hyuga_Nia 03.10.2011 01:25

Меню на DIV'ах и DHTML
 
Суть:
Код:

<html>
<body>
<ul>
<li onclick="div1.style.display='run-in'">1. Click here!</li>
<li onclick="div2.style.display='run-in'">2. Or here!</li>
<li onclick="div3.style.display='run-in'">3. Also here!</li>
</ul>
<div id="div1" style="display: none">
Тут текст дива 1
</div>
<div id="div2" style="display: none">
А тут 2. Ваш Кэп.
</div>
<div id="div3" style="display: none">
Ну и наконец, 3 десу!
</div>
</body>
</html>

Проблема: как сделать, чтобы при нажатии на пункт меню не только становился видимым нужный див, но и скрывались остальные? Вариант "писать про каждый отдельный див" не подойдет, ибо в настоящем меню пунктов чуть менее, чем дофига.

ksa 03.10.2011 09:19

Hyuga_Nia, почему блоки не внутри
<li>...</li>

?

ksa 03.10.2011 09:23

И никакого JS...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
li div {
	display: none;
}
li:hover div {
	display: block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul>
	<li>1. Click here!
		<div>
			Тут текст дива 1
		</div>
	</li>
	<li>2. Or here!
		<div>
			А тут 2. Ваш Кэп.
		</div>
	</li>
	<li>3. Also here!
		<div>
			Ну и наконец, 3 десу!
		</div>
	</li>
</ul>
</body>
</html>

Hyuga_Nia 03.10.2011 15:19

Цитата:

Сообщение от ksa (Сообщение 129306)
И никакого JS...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
li div {
	display: none;
}
li:hover div {
	display: block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul>
	<li>1. Click here!
		<div>
			Тут текст дива 1
		</div>
	</li>
	<li>2. Or here!
		<div>
			А тут 2. Ваш Кэп.
		</div>
	</li>
	<li>3. Also here!
		<div>
			Ну и наконец, 3 десу!
		</div>
	</li>
</ul>
</body>
</html>

1. А зачем дивы внутри списка? У меня они на сайте вообще в отдельных ячейках таблицы. В одной меню, а в другой контент.
2. Надо не onmouseover, а onclick.
3. А на чистом DHTML, без JavaScript не получится?
4. Что значит "[HTML run]"? И звёздочка в стилях?
5. UPD: Проблема еще осложнена наличием других дивов на странице, которые трогать не надо.
6. Посмотрел библиотеку. O_o Это что ж, всю ее надо будет сохранить, если я не хочу использовать внешние материалы (ибо сайт должен быть автономным и не зависеть от этих ваших интернетов)?!

ksa 03.10.2011 16:02

Цитата:

Сообщение от Hyuga_Nia
А зачем дивы внутри списка?

Я первый спросил. :)

Цитата:

Сообщение от Hyuga_Nia
А на чистом DHTML, без JavaScript не получится?

Учитавая твой п.2 - нет, не получится

Цитата:

Сообщение от Hyuga_Nia
Что значит "[HTML run]"? И звёздочка в стилях?

Нажми на кнопочку и увидишь... :)
Для всех элементов...

Цитата:

Сообщение от Hyuga_Nia
Посмотрел библиотеку.

А зачем ты её смотрел? :D В моём примере всё отключено...

Цитата:

Сообщение от Hyuga_Nia
У меня они на сайте вообще в отдельных ячейках таблицы. В одной меню, а в другой контент.

$20 и я порешаю твои проблемы... :)

Kolyaj 03.10.2011 16:11

Цитата:

Сообщение от Hyuga_Nia
3. А на чистом DHTML, без JavaScript не получится?

А что такое чистый DHTML?

Hyuga_Nia 03.10.2011 16:35

Цитата:

Сообщение от Kolyaj (Сообщение 129359)
А что такое чистый DHTML?

Насколько я понимаю, туда включены события в HTML'е. Например, onmouseover и onclick.
Цитата:

Сообщение от ksa (Сообщение 129356)
Учитавая твой п.2 - нет, не получится

=_=
То есть, нет такой функции в DHTML "присвоить стиль всем дивам"?
Те, которые не трогать, и тот, который нужен, можно заново включить потом.
Цитата:

Сообщение от ksa (Сообщение 129356)
А зачем ты её смотрел? :D В моём примере всё отключено...

Смотрел, чтобы узнать, что за файл мне придется сохранить, если я воспользуюсь этим вариантом.
В смысле, "всё отключено"? Что отключено?
Цитата:

Сообщение от ksa (Сообщение 129356)
$20 и я порешаю твои проблемы... :)

=_=
20*30=500 р…
А, какая разница, у меня сейчас все равно и 100 нету...
Fuuuuuuuuuuuuuuuuu…

walik 03.10.2011 18:41

// Прячем все дивы
var divs = document.getElementsByTagName('div');
for(i = 0;i < divs.length;i++)
   divs[i].style.display = 'none';

//Показываем нужный див
document.getElementById('div_kotorii_nujen').style.display = 'block';


Ну естественно что вместо поиска дивов по всему документу, вам нужно искать по какому ту ихнему общему родителю. Или вообще лучше по классам обращайтесь к дивам

Hyuga_Nia 03.10.2011 18:58

Цитата:

Сообщение от walik (Сообщение 129372)
// Прячем все дивы
var divs = document.getElementsByTagName('div');
for(i = 0;i < divs.length;i++)
   divs[i].style.display = 'none';

//Показываем нужный див
document.getElementById('div_kotorii_nujen').style.display = 'block';


Ну естественно что вместо поиска дивов по всему документу, вам нужно искать по какому ту ихнему общему родителю. Или вообще лучше по классам обращайтесь к дивам

Спасибо большое!
Только несколько вопросов.
1. А без JavaScript таки никак, да?
2. А как эту функцию показа и скрытия дивов к событию onclick присоединить?
3. Чтобы не делать отдельную функцию для каждого пункта меню... Как сделать, чтобы функция выполнялась не сама по себе, а от числа, которое уже у каждого пункта меню задаётся индивидуально? Ну как в алгебре... f(x)… x=div_kotorii_nujen
4. А если по общему родителю – покажется ли нужный див? Он же будет внутри скрытого общего родителя... И зачем тогда JavaScript? Я пытался их в один див объединить, и скрывать див 1, показывая, скажем, див 1.1... После скрытия общего дива (1) ничего больше не показывается...
P. S. Кстати, у меня не block, а run-in…

walik 03.10.2011 19:22

<ul>
  <li onclick="showHide('first');return false;">First</li>
  <li onclick="showHide('second');return false;">Second</li>
  <li onclick="showHide('third');return false;">Third</li>
</ul>
<div id="container">
   <div style="display: none;" id="first">First</div>
   <div style="display: none;" id="second">Second</div>
   <div style="display: none;" id="third">Third</div>
</div>
<script>
var container = document.getElementById('container');

function showHide(id) {
  var divs = container .getElementsByTagName('div');
  for(i = 0;i < divs.length;i++)
     divs[i].style.display = 'none';
 
  document.getElementById(id).style.display = 'run-in';
}
</script>


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