03.10.2011, 01:25
|
|
Аспирант
|
|
Регистрация: 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> |
Проблема: как сделать, чтобы при нажатии на пункт меню не только становился видимым нужный див, но и скрывались остальные? Вариант "писать про каждый отдельный див" не подойдет, ибо в настоящем меню пунктов чуть менее, чем дофига. |
|
03.10.2011, 09:19
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
Hyuga_Nia, почему блоки не внутри
<li>...</li>
?
|
|
03.10.2011, 09:23
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
И никакого 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>
|
|
03.10.2011, 15:19
|
|
Аспирант
|
|
Регистрация: 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.
|
|
03.10.2011, 16:02
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
|
Сообщение от Hyuga_Nia
|
|
А зачем дивы внутри списка?
|
Я первый спросил. 
|
Сообщение от Hyuga_Nia
|
|
А на чистом DHTML, без JavaScript не получится?
|
Учитавая твой п.2 - нет, не получится
|
Сообщение от Hyuga_Nia
|
|
Что значит "[HTML run]"? И звёздочка в стилях?
|
Нажми на кнопочку и увидишь...
Для всех элементов...
|
Сообщение от Hyuga_Nia
|
|
Посмотрел библиотеку.
|
А зачем ты её смотрел?  В моём примере всё отключено...
|
Сообщение от Hyuga_Nia
|
|
У меня они на сайте вообще в отдельных ячейках таблицы. В одной меню, а в другой контент.
|
$20 и я порешаю твои проблемы... |
|
03.10.2011, 16:11
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от Hyuga_Nia
|
|
3. А на чистом DHTML, без JavaScript не получится?
|
А что такое чистый DHTML? |
|
03.10.2011, 16:35
|
|
Аспирант
|
|
Регистрация: 20.01.2011
Сообщений: 40
|
|
|
Сообщение от Kolyaj
|
|
А что такое чистый DHTML?
|
Насколько я понимаю, туда включены события в HTML'е. Например, onmouseover и onclick.
|
Сообщение от ksa
|
|
Учитавая твой п.2 - нет, не получится
|
=_=
То есть, нет такой функции в DHTML "присвоить стиль всем дивам"?
Те, которые не трогать, и тот, который нужен, можно заново включить потом.
|
Сообщение от ksa
|
|
А зачем ты её смотрел? В моём примере всё отключено...
|
Смотрел, чтобы узнать, что за файл мне придется сохранить, если я воспользуюсь этим вариантом.
В смысле, "всё отключено"? Что отключено?
|
Сообщение от ksa
|
|
$20 и я порешаю твои проблемы...
|
=_=
20*30=500 р…
А, какая разница, у меня сейчас все равно и 100 нету...
Fuuuuuuuuuuuuuuuuu… |
|
03.10.2011, 18:41
|
 |
Профессор
|
|
Регистрация: 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.
|
|
03.10.2011, 18:58
|
|
Аспирант
|
|
Регистрация: 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.
|
|
03.10.2011, 19:22
|
|
Профессор
|
|
Регистрация: 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.
|
|
|
|
