Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.10.2011, 01:25
Аспирант
Отправить личное сообщение для Hyuga_Nia Посмотреть профиль Найти все сообщения от Hyuga_Nia
 
Регистрация: 20.01.2011
Сообщений: 40

Меню на 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>
Проблема: как сделать, чтобы при нажатии на пункт меню не только становился видимым нужный див, но и скрывались остальные? Вариант "писать про каждый отдельный див" не подойдет, ибо в настоящем меню пунктов чуть менее, чем дофига.
Ответить с цитированием
  #2 (permalink)  
Старый 03.10.2011, 09:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

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

?
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2011, 09:23
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

И никакого 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>
Ответить с цитированием
  #4 (permalink)  
Старый 03.10.2011, 15:19
Аспирант
Отправить личное сообщение для Hyuga_Nia Посмотреть профиль Найти все сообщения от Hyuga_Nia
 
Регистрация: 20.01.2011
Сообщений: 40

Сообщение от ksa Посмотреть сообщение
И никакого 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 Это что ж, всю ее надо будет сохранить, если я не хочу использовать внешние материалы (ибо сайт должен быть автономным и не зависеть от этих ваших интернетов)?!

Последний раз редактировалось Hyuga_Nia, 03.10.2011 в 16:03.
Ответить с цитированием
  #5 (permalink)  
Старый 03.10.2011, 16:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

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

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

Сообщение от Hyuga_Nia
Что значит "[HTML run]"? И звёздочка в стилях?
Нажми на кнопочку и увидишь...
Для всех элементов...

Сообщение от Hyuga_Nia
Посмотрел библиотеку.
А зачем ты её смотрел? В моём примере всё отключено...

Сообщение от Hyuga_Nia
У меня они на сайте вообще в отдельных ячейках таблицы. В одной меню, а в другой контент.
$20 и я порешаю твои проблемы...
Ответить с цитированием
  #6 (permalink)  
Старый 03.10.2011, 16:11
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Hyuga_Nia
3. А на чистом DHTML, без JavaScript не получится?
А что такое чистый DHTML?
Ответить с цитированием
  #7 (permalink)  
Старый 03.10.2011, 16:35
Аспирант
Отправить личное сообщение для Hyuga_Nia Посмотреть профиль Найти все сообщения от Hyuga_Nia
 
Регистрация: 20.01.2011
Сообщений: 40

Сообщение от Kolyaj Посмотреть сообщение
А что такое чистый DHTML?
Насколько я понимаю, туда включены события в HTML'е. Например, onmouseover и onclick.
Сообщение от ksa Посмотреть сообщение
Учитавая твой п.2 - нет, не получится
=_=
То есть, нет такой функции в DHTML "присвоить стиль всем дивам"?
Те, которые не трогать, и тот, который нужен, можно заново включить потом.
Сообщение от ksa Посмотреть сообщение
А зачем ты её смотрел? В моём примере всё отключено...
Смотрел, чтобы узнать, что за файл мне придется сохранить, если я воспользуюсь этим вариантом.
В смысле, "всё отключено"? Что отключено?
Сообщение от ksa Посмотреть сообщение
$20 и я порешаю твои проблемы...
=_=
20*30=500 р…
А, какая разница, у меня сейчас все равно и 100 нету...
Fuuuuuuuuuuuuuuuuu…
Ответить с цитированием
  #8 (permalink)  
Старый 03.10.2011, 18:41
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

// Прячем все дивы
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';


Ну естественно что вместо поиска дивов по всему документу, вам нужно искать по какому ту ихнему общему родителю. Или вообще лучше по классам обращайтесь к дивам
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай

Последний раз редактировалось walik, 03.10.2011 в 18:44.
Ответить с цитированием
  #9 (permalink)  
Старый 03.10.2011, 18:58
Аспирант
Отправить личное сообщение для Hyuga_Nia Посмотреть профиль Найти все сообщения от Hyuga_Nia
 
Регистрация: 20.01.2011
Сообщений: 40

Сообщение от walik Посмотреть сообщение
// Прячем все дивы
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…

Последний раз редактировалось Hyuga_Nia, 03.10.2011 в 19:08.
Ответить с цитированием
  #10 (permalink)  
Старый 03.10.2011, 19:22
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

<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>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай

Последний раз редактировалось walik, 03.10.2011 в 19:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Всплывающее меню (проблемы) Барин Элементы интерфейса 8 07.07.2011 09:22
Программа Sothink DHTML. Проблема с выпадающем меню в Opere и Мозила. wertor Javascript под браузер 1 27.01.2010 17:19